@bytebrand/fe-ui-core-autobahn 1.0.101 → 1.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.101",
+  "version": "1.0.103",
   "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",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.12",
+    "@bytebrand/fe-financing": "^5.14.15",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/utils/CommonUtils.ts

@@ -25,6 +25,23 @@ export const formatMileage = (millage: number | string) => {
   return millage.toLocaleString('en-US').replace(/,/g, '.');
 };
 
+// Same thresholds as the "NEU" badge (ADV-166, see fe-main/fe-landing/fe-wp-widgets
+// DataTransformers.ts) minus its extra "recently listed" (modificationDate) check —
+// this is about the car itself being practically brand-new, not about listing recency.
+// Missing firstRegistration passes the age check (can't disqualify what we don't know).
+const EFFECTIVELY_NEW_MAX_MILEAGE_KM = 1000;
+const EFFECTIVELY_NEW_MAX_AGE_MONTHS = 12;
+const AVG_MS_PER_MONTH = 1000 * 60 * 60 * 24 * 30.44;
+
+export const isEffectivelyNewCar = (mileageKm?: number | string | null, firstRegistration?: number | Date | string | null): boolean => {
+  if (!(Number(mileageKm) < EFFECTIVELY_NEW_MAX_MILEAGE_KM)) return false;
+  if (!firstRegistration) return true;
+  const registeredAtMs = firstRegistration instanceof Date ? firstRegistration.getTime() : Number(firstRegistration) * 1000;
+  if (!Number.isFinite(registeredAtMs)) return true;
+  const ageMonths = (Date.now() - registeredAtMs) / AVG_MS_PER_MONTH;
+  return ageMonths < EFFECTIVELY_NEW_MAX_AGE_MONTHS;
+};
+
 export const getFormattedNumber = (num: number) => Number.isFinite(num) ? num.toLocaleString('de-DE') : null;
 
 export const numberWithDot = (value: number | string) => {

package/utils/index.ts

@@ -43,6 +43,7 @@ export {
   checkRangeValuesOnEqual,
   fixNumber,
   formatMileage,
+  isEffectivelyNewCar,
   getChipFilterValue,
   getFormattedPrice,
   getGroupValuesForQuery,

package/vdp/VdpModules.tsx

@@ -1845,6 +1845,11 @@ export interface FinanceDetailsModalProps {
   /** car make+model — mobile sheet subtitle under the title (mockup). */
   vehicleName?: string;
   price: number;
+  /** "No package" reference price (common.basePrice = originalSalesPrice + margin) — the
+   *  Repräsentatives Beispiel's Fahrzeugpreis/Anschaffungspreis line uses THIS, not `price`
+   *  (which is the real, package-dependent Kaufen/rate-basis price shown everywhere else).
+   *  Falls back to `price` when not supplied. */
+  basePrice?: number;
   monthly: number;
   /** struck old rate (oldMonthlyInstallment, isStrikeShown-gated) — red line-through next to the rate. */
   oldMonthly?: number;
@@ -1859,8 +1864,14 @@ export interface FinanceDetailsModalProps {
   netLoanAmount?: number;
   /** Schlussrate (balloon final installment); shown only when > 0. */
   finalInstallment?: number;
-  /** Gesamt(rückzahlungs)betrag from the config; shown only when > 0 (never the wrong monthly·term). */
+  /** Gesamt(rückzahlungs)betrag from the config; shown only when > 0 (never the wrong monthly·term).
+   *  Drives the bold "Gesamtbelastung inkl. Anzahlung" grand total ONLY — the "Gesamtbetrag
+   *  Finanzierung" disclosure line itself uses totalFinancingAmount below instead. */
   grossAmount?: number;
+  /** getFinancing's totalFinancingAmount = (paybackPeriod-1)×monthlyCarPrice + finalInstallment —
+   *  the simpler Repräsentatives-Beispiel total (uniform Folgerate, no separate 1.Rate), financing
+   *  only. Falls back to grossAmount when not supplied. */
+  totalFinancingAmount?: number;
   /** Sollzinssatz p.a. (%); shown only when > 0. */
   nominalRate?: number;
   /** slider bounds — when the change handlers are supplied, the modal shows adjustment sliders. */
@@ -1921,6 +1932,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   mode,
   vehicleName,
   price,
+  basePrice,
   monthly,
   oldMonthly,
   listPrice,
@@ -1931,6 +1943,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   netLoanAmount,
   finalInstallment,
   grossAmount,
+  totalFinancingAmount,
   nominalRate,
   downMin,
   downMax,
@@ -2091,7 +2104,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     const subtotalWithPackage = ratesSum != null ? ratesSum + down + (hasAddServicesRow ? addServicesRowValue : 0) : undefined;
     const grandTotal = subtotalWithPackage != null ? subtotalWithPackage + residual : undefined;
     rows = [
-      [t('autobahn:modal.leaseVehiclePrice'), `${eurCents(price)} €`],
+      [t('autobahn:modal.leaseVehiclePrice'), `${eurCents(basePrice ?? price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
       ...(annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
       [t('autobahn:modal.leaseDownPayment'), `${eurCents(down)} €`],
@@ -2117,19 +2130,29 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
       ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
     ];
   } else {
+    // Ballonfinanzierung: `term` includes the Schlussrate as its final slot, so only
+    // (term-1) of them are regular Folgerate-value installments. Without a balloon, all
+    // `term` payments are regular — no adjustment.
+    const hasBalloon = finalInstallment != null && finalInstallment > 0;
+    const regularRateCount = hasBalloon ? term - 1 : term;
+    // Repräsentatives-Beispiel total for THIS line only — falls back to grossAmount when the
+    // page hasn't been updated to pass totalFinancingAmount yet.
+    const totalRepaymentValue = totalFinancingAmount ?? grossAmount;
     rows = [
-      [t('autobahn:modal.vehiclePrice'), `${eurCents(price)} €`],
+      [t('autobahn:modal.vehiclePrice'), `${eurCents(basePrice ?? price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
       [t('autobahn:modal.downPayment'), `${eurCents(down)} €`],
-      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eurCents(monthly)} €`],
-      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eurCents(finalInstallment)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.monthlyRateCount', { count: regularRateCount }), `${eurCents(monthly)} €`],
+      ...(hasBalloon ? ([[t('autobahn:modal.finalInstallment'), `${eurCents(finalInstallment)} €`]] as Array<[string, string]>) : []),
       ...(hasAddServicesRow
         ? ([[t('autobahn:modal.addServicesRow'), `${eurCents(addServicesRowValue)} €`]] as Array<[string, string]>)
         : []),
       ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
       [t('autobahn:modal.effectiveRate'), pct(apr)],
       [t('autobahn:modal.netLoanAmount'), `${eurCents(netto)} €`],
-      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eurCents(grossAmount)} €`]] as Array<[string, string]>) : []),
+      ...(totalRepaymentValue != null && totalRepaymentValue > 0
+        ? ([[t('autobahn:modal.totalRepayment'), `${eurCents(totalRepaymentValue)} €`]] as Array<[string, string]>)
+        : []),
       ...(totalCost != null
         ? ([[hasAddServices || hasAddServicesRow ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eurCents(totalCost)} €`, true]] as Array<
             [string, string, boolean]

package/vehiclesProps/decoratedProps.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import Icon from '../compat/IconContainer/IconContainer';
 import CO2Efficiency from '../compat/Co2Widget/CO2Efficiency';
 import { formatTimestamp } from '../utils/DateUtils';
-import { formatMileage } from '../utils/CommonUtils';
+import { formatMileage, isEffectivelyNewCar } from '../utils/CommonUtils';
 import { EMISSION_STICKERS_ICONS, WP_EMISSION_STICKERS_ICONS } from '../constants/Search';
 import { DELIVERY_PERIODS_EXTRA } from '../constants';
 import { IDecoratedProp, ICar, IFinancingUtils } from '../types/types';
@@ -1120,7 +1120,10 @@ const getDecoratedProps = (
     maintenanceGuide: {
       title: t('vehicleProps:title.maintenanceGuide'),
       get value() {
-        const fullserviceHistory = car.careService.fullServiceHistory;
+        // A practically brand-new car (near-zero mileage, recent/no first registration)
+        // is always treated as full-service-history, regardless of the raw dealer flag —
+        // there's simply been no time yet for a service history to matter.
+        const fullserviceHistory = isEffectivelyNewCar(mileage, firstRegistration) ? true : car.careService.fullServiceHistory;
         return isPropDefined(fullserviceHistory)
           ? (fullserviceHistory ? t('vehicleProps:value.yes') : t('vehicleProps:value.no'))
           : t('vehicleProps:value.na');