@bytebrand/fe-ui-core-autobahn 1.0.51 → 1.0.53

package/data/toAutobahnCar.ts

@@ -23,12 +23,12 @@
 // Every field path below was confirmed against the real code (file:line in
 // ./fieldMapping.ts), not guessed.
 
-import { getPriceRating, getPredictablePrice } from '../utils/CommonUtils';
+import { getPriceRating, getPredictablePrice } from '../utils/priceRating';
 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';
+import { TIER_LABELS, RatingTier, CO2_CLASSES, Co2Class } from '../constants/autobahn';
 
 /**
  * Last-resort placeholder shown in the carousel until the real images for a car
@@ -137,8 +137,9 @@ const CBD_DE_FALLBACK: Record<string, string> = {
   multimedia_bluetooth: 'Bluetooth',
 };
 
-/** translate a cbd:* selector code → human label. */
-function cbd(code: any, t?: (key: string, options?: object) => string): string {
+/** translate a cbd:* selector code → human label. Exported: also used by the Meta AIA
+ *  marketing-image renderer (plain Node backend, no i18next — relies on the built-in de fallback). */
+export function cbd(code: any, t?: (key: string, options?: object) => string): string {
   if (code == null || code === 'N/A') return '';
   const key = String(code);
   if (t) {
@@ -155,7 +156,7 @@ function cbd(code: any, t?: (key: string, options?: object) => string): string {
  * 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 | '' {
+export function co2ClassLetter(code: any): Co2Class | '' {
   if (code == null || code === 'N/A') return '';
   const raw = String(code);
   // selector_energyEfficiencyClass_appp → 'a', _ap → 'a', _b → 'b', …
@@ -202,13 +203,24 @@ const TIER_TONE: Record<RatingTier, string> = {
   4: 'high',
 };
 
-function mapRating(currentSalesPrice?: number, predicted?: number): { rating: string; ratingLabel: string } {
+export 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] };
 }
 
+/**
+ * Map the 5-tier rating to a 2-tone signal — only 'top'/'good' read as a genuinely good deal
+ * (green); 'fair'/'raised'/'high' all get the warn/peach tone (Figma: "Erhöhter-Preis" is
+ * peach, not green). Pure/non-React on purpose: shared by the web card's StatChip (via
+ * cards/cardParts.tsx's re-export) AND the Meta AIA marketing-image renderer (a plain Node
+ * service that can't import React components).
+ */
+export function ratingTone(rating: string): 'good' | 'warn' {
+  return rating === 'top' || rating === 'good' ? 'good' : 'warn';
+}
+
 /** 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';
@@ -381,6 +393,13 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     savings = highest - purchase;
   }
 
+  // --- struck-through old rate per payment path — same isStrikeShown gate as the Kaufen
+  // strike above. getFinancing.ts/getLeasing.ts each compute their own real
+  // oldMonthlyInstallment from the same common.highestPrice; only emitted when the tabbed
+  // hero price actually has something real to strike against.
+  const oldMonthly = isStrikeShown ? num(price?.financing?.oldMonthlyInstallment) : undefined;
+  const oldLease = isStrikeShown && leasingActive ? num(price?.leasing?.oldMonthlyInstallment) : undefined;
+
   // --- 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);
@@ -451,6 +470,8 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     // optional (only when real)
     ...(listPrice != null ? { listPrice } : {}),
     ...(savings != null ? { savings } : {}),
+    ...(oldMonthly != null && oldMonthly > monthly ? { oldMonthly } : {}),
+    ...(oldLease != null && lease != null && oldLease > lease ? { oldLease } : {}),
     ...(lease != null ? { lease } : {}),
     ...(leaseMileage != null ? { leaseMileage } : {}),
     ...(leaseMonths != null ? { leaseMonths } : {}),

package/locales/de/autobahn.json

@@ -51,6 +51,9 @@
     },
     "cta": {
       "viewOffer": "Zum Angebot"
+    },
+    "badge": {
+      "offer": "Angebot"
     }
   },
   "finance": {

package/locales/en/autobahn.json

@@ -51,6 +51,9 @@
     },
     "cta": {
       "viewOffer": "View offer"
+    },
+    "badge": {
+      "offer": "Offer"
     }
   },
   "finance": {

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.51",
-  "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.",
+  "version": "1.0.53",
+  "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. A small set of pure, asset-require-free leaf modules (see tsconfig.node-safe.json) additionally ship a compiled .js/.d.ts sibling next to their .ts source, so plain-Node backends (e.g. image-generator's Meta AIA renderer) can require() them directly without a bundler — frontend consumers are unaffected (webpack resolves .ts/.tsx before .js).",
   "main": "index.ts",
+  "scripts": {
+    "build:node-safe": "tsc -p tsconfig.node-safe.json"
+  },
   "license": "UNLICENSED",
   "peerDependencies": {
     "react": "^18.0.0",

package/theme/md3.css

@@ -957,6 +957,9 @@
 .md3 .srp-chips { flex: 1 1 260px; min-width: 0; }
 /* "NEU" badge on car cards (legacy new-car label). */
 .md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
+/* "⚡ Angebot" badge — dark neutral pill above the gallery (card mockup), distinct from NEU. */
+.md3 .offer-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--md-r-full); background: var(--md-on-surface); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.md3 .offer-badge .lucide { width: 13px; height: 13px; }
 @media (max-width: 820px) { .md3 .srp-chips { order: 3; flex-basis: 100%; } }
 .md3 .vdp-grid       { display: grid; grid-template-columns: 1fr 372px; gap: 28px; align-items: start; }
 .md3 .vdp-gallery    { grid-column: 1; grid-row: 1; }
@@ -1120,9 +1123,13 @@
 /* financing hero (legacy-style): eyebrow → big blue rate → terms line (fills the upper gap) */
 .md3 .pp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
   color: var(--md-on-surface-variant); margin-bottom: 4px; }
-.md3 .pp-hero-rate { display: flex; align-items: baseline; gap: 5px; }
+.md3 .pp-hero-rate { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
 .md3 .pp-hero-val { font-size: 32px; font-weight: 700; color: var(--md-primary); letter-spacing: -1px; line-height: 1; }
 .md3 .pp-hero-unit { font-size: 13px; color: var(--md-on-surface-variant); }
+/* struck-through reference rate/price shown next to the tabbed hero price (Figma card) —
+   same red strike as .pp-old, sized for the hero context rather than the compact list row. */
+.md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
+.md3 .pp-hero-val sup, .md3 .pp-hero-old sup, .md3 .pp-hero-unit sup { font-size: .6em; }
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
 /* separator line between the financing block and the leasing row (legacy-design parity) */
 .md3 .pp-lease-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
@@ -1163,6 +1170,23 @@
   background: linear-gradient(90deg, var(--md-good) 0%, #E8B500 58%, #E8601A 100%); }
 .md3 .pp-bar-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff;
   border: 2.5px solid var(--md-on-surface); transform: translate(-50%, -50%); box-shadow: var(--md-e1); }
+/* grid Car Card price block (Figma "Component | Car Card | Desktop") — the hero price/tabs are
+   much larger here than the shared .pp-hero-* sizing used to give them (those classes are only
+   consumed inside .cc-price now, so bumping them here is safe). */
+.md3 .cc-price .fin-tabs { margin-bottom: 12px; }
+.md3 .cc-price .fin-tab { font-size: 17px; font-weight: 700; padding: 8px 4px; }
+.md3 .cc-price .pp-eyebrow { font-size: 13px; margin-bottom: 2px; }
+.md3 .cc-price .pp-hero-val { font-size: 44px; letter-spacing: -1.5px; }
+.md3 .cc-price .pp-hero-old { font-size: 20px; }
+.md3 .cc-price .pp-hero-unit { font-size: 16px; }
+.md3 .cc-price .pp-bar { height: 7px; }
+.md3 .cc-price .pp-bar-dot { width: 16px; height: 16px; }
+/* card CTA row (Angebot anfragen / phone / Rate anpassen) — the shared .mbtn padding (0 24px)
+   and 14px font were sized for full-width VDP buttons; at a ~330-360px card/column width three
+   buttons with real text at that size overflow their flex share. Scoped-down here only. */
+.md3 .card-cta-row .mbtn { font-size: 12.5px; padding: 0 10px; gap: 5px; min-width: 0; }
+.md3 .card-cta-row .mbtn span, .md3 .card-cta-row .mbtn { overflow: hidden; text-overflow: ellipsis; }
+.md3 .card-cta-row .mbtn .lucide { width: 15px; height: 15px; flex: none; }
 /* muted buyer activity (#5) */
 .md3 .pp-activity { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px;
   color: var(--md-on-surface-variant); white-space: nowrap; }

package/tsconfig.node-safe.json

@@ -0,0 +1,25 @@
+{
+  "//": "Compiles ONLY the pure, asset-require-free leaf modules a plain-Node backend can safely import (currently: image-generator's Meta AIA renderer). Emits .js/.d.ts NEXT TO each .ts source (no outDir/rootDir — setting outDir to '.' makes tsc auto-exclude the whole package as its own output dir). Frontend (webpack) consumers are unaffected: resolve.extensions puts .ts/.tsx before .js. Run `npm run build:node-safe` before publishing. Do NOT add a file here unless you've confirmed its full transitive import closure never reaches a .tsx file or a webpack-only asset require() (see constants/autobahn.ts's header comment for why that matters).",
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmitOnError": true
+  },
+  "include": [
+    "data/toAutobahnCar.ts",
+    "utils/priceRating.ts",
+    "utils/DateUtils.ts",
+    "utils/power.ts",
+    "utils/financeFormat.ts",
+    "cards/types.ts",
+    "constants/autobahn.ts",
+    "constants/price.ts",
+    "constants/core.ts",
+    "constants/selectors.ts"
+  ]
+}

package/utils/CommonUtils.ts

@@ -6,9 +6,8 @@ import {
   FIRST_REGISTRATION, MANUFACTURER, MILEAGE, MODEL, BODY_TYPE, PRICE, RATE,
   DROP_DOWN_GROUP, RATE_DEFAULT, MMS_GROUPS_KEY, MMS_GROUP_FIELDS
 } from '../constants/SearchWidget';
-import { priceRatings, priceRatingConfig } from '../constants/price';
 import { HUNDRED } from '../constants/common';
-import { offers, PREDICTABLE_PRICE_INDEX } from '../constants/core';
+import { offers } from '../constants/core';
 import { FILTERS_IN_TITLE, MANUFACTURER_KEY, MAX_FILTERS_IN_TITLE, MODEL_KEY } from '../constants/Search';
 import { isArray } from 'lodash';
 
@@ -324,52 +323,10 @@ export const getFormattedPrice = (price: number, format = '$,.0f', currency = ''
 };
 
 
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Preisbewertung rating math moved to ./priceRating.ts (kept import-safe for plain Node
+// consumers — this file pulls in ../constants/Search, which requires image assets). Re-exported
+// here so existing CommonUtils consumers are unaffected.
+export { getPriceRatingConfig, getPredictablePrice, getPriceRating } from './priceRating';
 
 export const fixNumber = (num: number | string) => {
   const isNum = typeof num === 'number' ? num : parseFloat(num);

package/utils/DateUtils.d.ts

@@ -0,0 +1,21 @@
+import { MomentInput } from 'moment';
+export interface IFormatTimestamp {
+    timestamp?: MomentInput;
+    format?: string;
+    parseFormat?: string;
+}
+export declare const timestampToDate: (timestamp: number) => string;
+export declare const formatTimestamp: ({ timestamp, format, parseFormat }: IFormatTimestamp) => string;
+export declare const getSearchYears: () => any[];
+export declare const getCurrentYear: () => number;
+export declare const getMonths: () => string[];
+export declare function isDateInDaysPeriod(timestamp: number, days: number): boolean;
+export declare const handleMaxDate: () => string;
+export declare const handleMaxDateForPicker: () => string;
+export declare const _minDate: Date;
+export declare const сheckingMinDateIsCorrect: (value: any) => boolean;
+export declare const сheckingMaxDateIsCorrect: (value: any) => boolean;
+export declare const checkingWhenLess18Age: (value: any) => boolean;
+export declare const getYears: (minYear?: number, maxYear?: number, reverse?: boolean) => string[];
+export declare const createDateAsUTC: (date: Date) => Date;
+export declare const fromUTCToDateString: (UTCDate: Date) => string;

package/utils/DateUtils.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fromUTCToDateString = exports.createDateAsUTC = exports.getYears = exports.checkingWhenLess18Age = exports.сheckingMaxDateIsCorrect = exports.сheckingMinDateIsCorrect = exports._minDate = exports.handleMaxDateForPicker = exports.handleMaxDate = exports.getMonths = exports.getCurrentYear = exports.getSearchYears = exports.formatTimestamp = exports.timestampToDate = void 0;
+exports.isDateInDaysPeriod = isDateInDaysPeriod;
+const moment_1 = __importDefault(require("moment"));
+const timestampToDate = (timestamp) => {
+    if (!timestamp)
+        return 'N/A';
+    const date = new Date(timestamp * 1000);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const monthFormatted = month < 10 ? `0${month}` : month;
+    return (`${monthFormatted}/${year}`);
+};
+exports.timestampToDate = timestampToDate;
+// accepts ISO 8601, RFC 2822 or Unix timestamp in seconds and converts it to the given format
+// invocation without arguments creates a current UNIX timestamp in seconds
+const formatTimestamp = ({ timestamp, format = 'X', parseFormat }) => {
+    // try to parse number timestamp as unix timestamp in case if parseFormat is not specified
+    // use undefined for string timestamps with no parseFormat in hope that it will either be
+    // ISO 8601 or RFC 2822 and moment will be able to figure it out
+    let parseAs = parseFormat;
+    if (!parseFormat && typeof timestamp === 'number')
+        parseAs = 'X';
+    return moment_1.default.utc(timestamp, parseAs).format(format);
+};
+exports.formatTimestamp = formatTimestamp;
+const getSearchYears = () => {
+    const currentYear = (new Date()).getFullYear();
+    const years = [];
+    let nextYear = currentYear;
+    while (nextYear >= 2011) { // tslint:disable-line
+        years.push(nextYear);
+        nextYear = nextYear - 1;
+    }
+    return [...years];
+};
+exports.getSearchYears = getSearchYears;
+const getCurrentYear = () => (new Date()).getFullYear();
+exports.getCurrentYear = getCurrentYear;
+const getMonths = () => {
+    const count = [...new Array(12)]; // tslint:disable-line
+    return count.map((_, index) => (String(1 + index)));
+};
+exports.getMonths = getMonths;
+function isDateInDaysPeriod(timestamp, days) {
+    const today = new Date();
+    // tslint:disable-next-line: no-magic-numbers
+    const period = 1000 * 60 * 60 * 24 * days; // 1000 * 60 * 60 * 24 * days
+    const ms = 1000;
+    const result = !!timestamp && today.getTime() - timestamp * ms < period;
+    return result;
+}
+// for checkout datepicker
+const handleMaxDate = () => {
+    const day = +String(new Date().getDate()).padStart(2, '0');
+    const month = String(new Date().getMonth() + 1).padStart(2, '0');
+    const year = new Date().getFullYear() - 18;
+    return `${month}/${day}/${year}`;
+};
+exports.handleMaxDate = handleMaxDate;
+const handleMaxDateForPicker = () => {
+    const day = String(new Date().getDate()).padStart(2, '0');
+    const month = String(new Date().getMonth() + 1).padStart(2, '0');
+    const year = new Date().getFullYear() - 18;
+    return `${month}/${day}/${year}`;
+};
+exports.handleMaxDateForPicker = handleMaxDateForPicker;
+exports._minDate = new Date('01/01/1900');
+const сheckingMinDateIsCorrect = (value) => exports._minDate.getTime() < new Date(value).getTime();
+exports.сheckingMinDateIsCorrect = сheckingMinDateIsCorrect;
+const сheckingMaxDateIsCorrect = (value) => new Date((0, exports.handleMaxDate)()).getTime() > new Date(value).getTime();
+exports.сheckingMaxDateIsCorrect = сheckingMaxDateIsCorrect;
+const checkingWhenLess18Age = (value) => new Date().getTime() >= new Date(value).getTime();
+exports.checkingWhenLess18Age = checkingWhenLess18Age;
+const getYears = (minYear = 1980, maxYear = (0, moment_1.default)().year(), reverse = false) => {
+    const years = [];
+    for (let i = maxYear; i >= minYear; i -= 1) {
+        years.push(`${i}`);
+    }
+    return reverse ? years.sort() : years;
+};
+exports.getYears = getYears;
+const createDateAsUTC = (date) => new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+exports.createDateAsUTC = createDateAsUTC;
+// end for checkout datepicker
+const fromUTCToDateString = (UTCDate) => {
+    const date = new Date(UTCDate);
+    const day = date.getUTCDate().toString().padStart(2, '0');
+    const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+    const year = date.getUTCFullYear();
+    return `${day}.${month}.${year}`;
+};
+exports.fromUTCToDateString = fromUTCToDateString;

package/utils/financeFormat.d.ts

@@ -0,0 +1,32 @@
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export declare function formatEur(n: number): string;
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export declare function formatPct(n: number): string;
+export interface FinanceExampleFields {
+    price: number;
+    apr: number;
+    down: number;
+    /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+    netLoanAmount?: number;
+    nominalRate?: number;
+    finalInstallment?: number;
+    grossAmount?: number;
+}
+export interface FinanceExampleLabels {
+    vehiclePrice: string;
+    priceSuffix: string;
+    apr: string;
+    nominal: string;
+    net: string;
+    down: string;
+    final: string;
+    gross: string;
+}
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export declare function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker?: string): string;

package/utils/financeFormat.js

@@ -0,0 +1,42 @@
+"use strict";
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatEur = formatEur;
+exports.formatPct = formatPct;
+exports.buildFinanceExampleLine = buildFinanceExampleLine;
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+function formatEur(n) {
+    return n.toLocaleString('de-DE');
+}
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+function formatPct(n) {
+    return `${n.toFixed(2).replace('.', ',')} %`;
+}
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+function buildFinanceExampleLine(fields, labels, footnoteMarker = '³') {
+    const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+    const parts = [
+        `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+        ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+        ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+        `${labels.net}: ${formatEur(netto)} €`,
+        `${labels.down}: ${formatEur(fields.down)} €`,
+        ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+        ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+    ];
+    return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/financeFormat.ts

@@ -0,0 +1,62 @@
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/index.ts

@@ -20,9 +20,19 @@ export {
   checkingWhenLess18Age,
   getMonths,
   getYears,
-  createDateAsUTC
+  createDateAsUTC,
+  fromUTCToDateString
 } from './DateUtils';
 
+// Finance number formatting (pure — no React; safe for non-React consumers)
+
+export {
+  formatEur,
+  formatPct,
+  buildFinanceExampleLine
+} from './financeFormat';
+export type { FinanceExampleFields, FinanceExampleLabels } from './financeFormat';
+
 // Common utils
 
 export {

package/utils/power.d.ts

@@ -0,0 +1 @@
+export declare const getPowerLabel: (powerKW: number, powerPS: number) => string;

package/utils/power.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPowerLabel = void 0;
+// Pure power-label formatter, extracted from fe-ui-core's
+// source/framework/vehiclesProps/decoratedProps.tsx (which stays in fe-ui-core
+// because it drags React UI). Exactly one implementation lives here;
+// decoratedProps re-exports it for backwards compatibility.
+const getPowerLabel = (powerKW, powerPS) => {
+    const powerKWlabel = !!powerKW ? `${powerKW} kW ` : '';
+    const powerPSlabel = !!powerPS ? `${!!powerKW ? '(' : ''}${powerPS} PS${!!powerKW ? ')' : ''}` : '';
+    const powerKWpowerPS = `${powerKWlabel}${powerPSlabel}`;
+    return powerKWpowerPS;
+};
+exports.getPowerLabel = getPowerLabel;

package/utils/priceRating.d.ts

@@ -0,0 +1,3 @@
+export declare const getPriceRatingConfig: (currentPrice: number, pricePredicted: number) => any;
+export declare const getPredictablePrice: (currentSalesPrice: number, predictablePrice: number) => number;
+export declare const getPriceRating: (currentSalesPrice: number, predictablePrice: number) => number;

package/utils/priceRating.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPriceRating = exports.getPredictablePrice = exports.getPriceRatingConfig = void 0;
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports), so the Meta AIA
+// marketing-image renderer (a plain Node backend, see ../data/toAutobahnCar.ts's `mapRating`)
+// can import real Preisbewertung math without dragging in frontend-only asset requires.
+// CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+const price_1 = require("../constants/price");
+const core_1 = require("../constants/core");
+const getPriceRatingConfig = (currentPrice, pricePredicted) => {
+    const round = (value) => {
+        return Number.isFinite(pricePredicted)
+            ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+            : '???';
+    };
+    if (currentPrice === 0) {
+        console.log('Empty current price');
+    }
+    return Object.keys(price_1.priceRatingConfig).reduce((acc, key) => {
+        const { min, max } = price_1.priceRatingConfig[key];
+        return { ...acc, [key]: { min: round(min), max: round(max) } };
+    }, {}); // tslint:disable-line
+};
+exports.getPriceRatingConfig = getPriceRatingConfig;
+const getPredictablePrice = (currentSalesPrice, predictablePrice) => {
+    if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+        return predictablePrice;
+    }
+    return currentSalesPrice * core_1.PREDICTABLE_PRICE_INDEX;
+};
+exports.getPredictablePrice = getPredictablePrice;
+const getPriceRating = (currentSalesPrice, predictablePrice) => {
+    const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+    // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+    if (!isCorrectCurrentSalesPrice)
+        return 0;
+    const validatedPredictablePrice = (0, exports.getPredictablePrice)(currentSalesPrice, predictablePrice);
+    const ratingConfig = (0, exports.getPriceRatingConfig)(currentSalesPrice, validatedPredictablePrice);
+    for (const key of Object.keys(ratingConfig)) {
+        const { min, max } = ratingConfig[key];
+        const TOP_PRICE = 5;
+        if (key === 'highPrice' && currentSalesPrice === max)
+            return 1;
+        if (key === 'topPrice' && currentSalesPrice <= min)
+            return TOP_PRICE;
+        if (currentSalesPrice >= min && currentSalesPrice < max)
+            return price_1.priceRatings.indexOf(key);
+    }
+    return 0;
+};
+exports.getPriceRating = getPriceRating;