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

package/utils/priceRating.ts

@@ -0,0 +1,57 @@
+// 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.
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+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;
+};

package/vdp/VdpModules.tsx

@@ -28,8 +28,7 @@ import { Button, Icon, Spec, StatChip, Stars, Switch } from '../ui';
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
-
-const eur = (n: number): string => n.toLocaleString('de-DE');
+import { formatEur as eur, formatPct as pct, buildFinanceExampleLine } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
  *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
@@ -1539,7 +1538,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
           for (let v = termMin as number; v <= (termMax as number); v += termStep || 12) out.push(v);
           return out.length ? out : [term];
         })();
-  const pct = (n: number) => `${n.toFixed(2).replace('.', ',')} %`;
   // Only REAL figures (from the financing config). Balloon financing means monthly·term is NOT the
   // total, so Schlussrate + Gesamtbetrag come from the config and are omitted when unavailable —
   // never a fabricated/misleading total.
@@ -1576,17 +1574,21 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 
   // mobile sheet footnote — the Figma representative example: real figures inline
   // ("³ Fahrzeugpreis: … €; Effektiver Jahreszins: … %; …") followed by the PangV sentence.
-  // Only REAL config figures are included; absent ones are simply omitted.
-  const exampleParts: string[] = [
-    `${t('autobahn:modal.exampleVehiclePrice')}: ${eur(price)} € ${t('autobahn:modal.examplePriceSuffix')}`,
-    ...(apr > 0 ? [`${t('autobahn:modal.exampleApr')}: ${pct(apr)}`] : []),
-    ...(nominalRate != null && nominalRate > 0 ? [`${t('autobahn:modal.exampleNominal')}: ${pct(nominalRate)}`] : []),
-    `${t('autobahn:modal.exampleNet')}: ${eur(netto)} €`,
-    `${t('autobahn:modal.exampleDown')}: ${eur(down)} €`,
-    ...(finalInstallment != null && finalInstallment > 0 ? [`${t('autobahn:modal.exampleFinal')}: ${eur(finalInstallment)} €`] : []),
-    ...(grossAmount != null && grossAmount > 0 ? [`${t('autobahn:modal.exampleGross')}: ${eur(grossAmount)} €`] : []),
-  ];
-  const exampleLine = `³ ${exampleParts.join('; ')};`;
+  // Only REAL config figures are included; absent ones are simply omitted — shared logic with
+  // the Meta AIA marketing-image renderer, see ../utils/financeFormat.ts.
+  const exampleLine = buildFinanceExampleLine(
+    { price, apr, down, netLoanAmount, nominalRate, finalInstallment, grossAmount },
+    {
+      vehiclePrice: t('autobahn:modal.exampleVehiclePrice'),
+      priceSuffix: t('autobahn:modal.examplePriceSuffix'),
+      apr: t('autobahn:modal.exampleApr'),
+      nominal: t('autobahn:modal.exampleNominal'),
+      net: t('autobahn:modal.exampleNet'),
+      down: t('autobahn:modal.exampleDown'),
+      final: t('autobahn:modal.exampleFinal'),
+      gross: t('autobahn:modal.exampleGross'),
+    },
+  );
 
   return (
     <div className="fin-modal-scrim" onClick={onClose}>