@bytebrand/fe-ui-core-autobahn 1.0.73 → 1.0.75

package/theme/md3.css

@@ -4365,7 +4365,6 @@ line-height: 31px;
   justify-content: center;
   position: absolute;
   top: -5px;
-  right: -5px;
   border-radius: 50%;
   width: 12px;
   height: 11px;
@@ -4627,17 +4626,20 @@ line-height: 31px;
   border: 1px solid transparent;
 }
 .md3 .cc-card .deal-chip--drop {
-  background: rgba(17, 110, 57, 0.2) !important;
+  /* solid equivalent of rgba(17, 110, 57, 0.2) over white — the badge now sits over an
+     edge-to-edge photo (CardCarousel padding removed), so a translucent fill let the image
+     show through instead of the intended pastel tint. */
+  background: rgb(207, 226, 215) !important;
   border-color: rgba(17, 110, 57, 0.05);
   color: #116e39 !important;
 }
 .md3 .cc-card .deal-chip--percent {
-  background: rgba(217, 45, 32, 0.2) !important;
+  background: rgb(247, 213, 210) !important;
   border-color: rgba(217, 45, 32, 0.05);
   color: #d92d20 !important;
 }
 .md3 .cc-card .deal-chip--zerodown {
-  background: rgba(0, 92, 255, 0.2) !important;
+  background: rgb(204, 222, 255) !important;
   border-color: rgba(0, 92, 255, 0.05);
   color: #005cff !important;
 }
@@ -4645,7 +4647,7 @@ line-height: 31px;
 .md3 .cc-card .neu-badge {
   height: 30px;
   padding: 0 10px;
-  background: rgba(255, 184, 0, 0.2);
+  background: rgb(255, 241, 204);
   border: 1px solid rgba(255, 184, 0, 0.05);
   color: #ffb800;
   font-size: 13px;
@@ -4656,7 +4658,7 @@ line-height: 31px;
   height: 30px;
   padding: 0 10px;
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(204, 204, 204);
   border: 1px solid rgba(0, 0, 0, 0.05);
   color: #000;
   font-size: 14px;
@@ -4668,12 +4670,34 @@ line-height: 31px;
 }
 .md3 .cc-price .fin-tabs { margin-bottom: 12px; }
 .md3 .cc-price .fin-tab { font-size: 17px; font-weight: 700; padding: 10px 5px; }
+@media (max-width: 1024px) {
+  /* mobile CarCard tabs: only the ACTIVE tab bold + blue, matching the min-width:1025px desktop
+     override further below — :not(.on) matches its specificity so a later, equal-specificity
+     rule (.md3 .fin-tab:not(.on), bold+#111820 for both states) can't win the cascade on
+     source-order alone. */
+  .md3 .cc-price .fin-tab:not(.on) {
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #0E2238;
+  }
+  .md3 .cc-price .fin-tab.on {
+    font-family: 'Arial';
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 16px;
+    color: #005CFF;
+  }
+}
 /* Finanzierung tab price row (Figma "similar cars" card) — matches the VDP finance-calculator's
    MOBILE .fin-price-grid treatment one-to-one (same rate/old-price/pill typography and colors),
    by explicit spec. Previously gated to min-width:601px (left the pre-existing mobile .cc-card
    price row alone); now applied at every width on request, so mobile CarCard matches too. */
   .md3 .cc-price .pp-eyebrow,
-  .md3 .fin-calc-card .pp-eyebrow {
+  .md3 .fin-calc-card .pp-eyebrow,
+  .md3 .vdp-bottom-bar .pp-eyebrow,
+  .md3 .fin-modal .pp-eyebrow {
     position: relative;
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
@@ -4689,7 +4713,9 @@ line-height: 31px;
      corner — absolute against .pp-eyebrow's own position:relative above. Shared by the CarCard
      hero (.cc-price) and the VDP FinanceCalculator's own rate example (.fin-calc-card). */
   .md3 .cc-price .pp-eyebrow-badge,
-  .md3 .fin-calc-card .pp-eyebrow-badge {
+  .md3 .fin-calc-card .pp-eyebrow-badge,
+  .md3 .vdp-bottom-bar .pp-eyebrow-badge,
+  .md3 .fin-modal .pp-eyebrow-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -4712,7 +4738,9 @@ line-height: 31px;
   }
   /* mobile-only nudge: same badge, tucked slightly closer to the eyebrow text on narrow cards. */
   @media (max-width: 1024px) {
-    .md3 .cc-price .pp-eyebrow-badge {
+    .md3 .cc-price .pp-eyebrow-badge,
+    .md3 .vdp-bottom-bar .pp-eyebrow-badge,
+    .md3 .fin-modal .pp-eyebrow-badge {
       top: -5px;
       right: -5px;
     }
@@ -4720,13 +4748,17 @@ line-height: 31px;
   /* "2" badge (Kaufen, nested in .pp-hero-old instead of .pp-eyebrow) sits closer to the price
      figure than the "3" badge's own offsets above. */
   .md3 .cc-price .pp-hero-old .pp-eyebrow-badge,
-  .md3 .fin-calc-card .pp-hero-old .pp-eyebrow-badge {
+  .md3 .fin-calc-card .pp-hero-old .pp-eyebrow-badge,
+  .md3 .vdp-bottom-bar .fin-rate-old-bb .pp-eyebrow-badge,
+  .md3 .fin-modal .fin-rate-old-list .pp-eyebrow-badge {
     top: -7px;
     right: -12px;
   }
   /* "3" footnote popover — click the badge above to open, the × or an outside click to close. */
   .md3 .cc-price .pp-uvp-tooltip,
-  .md3 .fin-calc-card .pp-uvp-tooltip {
+  .md3 .fin-calc-card .pp-uvp-tooltip,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip,
+  .md3 .fin-modal .pp-uvp-tooltip {
     position: absolute;
     top: 6px;
     right: -84px;
@@ -4739,10 +4771,18 @@ line-height: 31px;
     white-space: normal;
     cursor: default;
   }
+  /* the bottom bar spans nearly the full phone width, so the shared -84px offset (tuned for
+     the narrower .cc-price card / .fin-calc-card sheet) leaves the popover sitting too far left. */
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip {
+    top: -20px;
+    right: -110px;
+  }
   /* floating circular close button — overlaps the tooltip's top-right corner from outside,
      same "glass circle" convention as VdpViewer's close/back/next overlay buttons. */
   .md3 .cc-price .pp-uvp-tooltip-close,
-  .md3 .fin-calc-card .pp-uvp-tooltip-close {
+  .md3 .fin-calc-card .pp-uvp-tooltip-close,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip-close,
+  .md3 .fin-modal .pp-uvp-tooltip-close {
     position: absolute;
     top: -38px;
     right: -35px;
@@ -4758,7 +4798,9 @@ line-height: 31px;
     cursor: pointer;
   }
   .md3 .cc-price .pp-uvp-tooltip-body,
-  .md3 .fin-calc-card .pp-uvp-tooltip-body {
+  .md3 .fin-calc-card .pp-uvp-tooltip-body,
+  .md3 .vdp-bottom-bar .pp-uvp-tooltip-body,
+  .md3 .fin-modal .pp-uvp-tooltip-body {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 400;
     font-size: 11px;
@@ -4846,6 +4888,25 @@ line-height: 31px;
     order: -1;
     align-self: flex-end;
   }
+  /* Kaufen hero price on mobile — was falling through to the generic (rate-sized) .pp-hero-val
+     above (65px, shrinking only via the rate-digit len4/5/6 classes cardParts.tsx never applies
+     in Kaufen mode), so real purchase prices had no digit-based shrink at all here and could
+     overflow. Mirrors the existing min-width:1025px desktop rule exactly. */
+  .md3 .cc-price .pp-hero--buy .pp-hero-val {
+    font-family: 'Arial';
+    font-weight: 700;
+    font-size: 52px;
+    line-height: 58px;
+    color: #005CFF;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len6 {
+    font-size: 48px;
+    line-height: 54px;
+  }
+  .md3 .cc-price .pp-hero--buy .pp-hero-val.pp-hero-val--buy-len7 {
+    font-size: 43px;
+    line-height: 47px;
+  }
   /* Preisbewertung pill + segmented tier bar, grouped in one column exactly like the VDP
      finance-calculator's MOBILE .fin-eval-col (FinanceCalculator.tsx) — replaces the old
      StatChip pill + full-width gradient .pp-bar (see PriceEvalCol in cardParts.tsx). No
@@ -4877,9 +4938,11 @@ line-height: 31px;
   /* footnote 4 ("Top-Preis" claim) — .fin-eval-pill is a flex container, so vertical-align has
      no effect on the sup (it's a flex item, not inline content); position:relative/top raises
      it instead, same technique as the hero price's own 1/2/3 footnote markers. Shared by the
-     CarCard hero (.cc-price) and the VDP FinanceCalculator's own pill (.fin-calc-card). */
+     CarCard hero (.cc-price), the VDP FinanceCalculator's own pill (.fin-calc-card), and the
+     FinanceDetailsModal's embedded mobile rate sheet (.fin-modal). */
   .md3 .cc-price .fin-eval-pill sup,
-  .md3 .fin-calc-card .fin-eval-pill sup {
+  .md3 .fin-calc-card .fin-eval-pill sup,
+  .md3 .fin-modal .fin-eval-pill sup {
     position: relative;
     top: 0px;
     left: -4px;
@@ -4909,11 +4972,12 @@ line-height: 31px;
    (PricePaths); the link resets button chrome and reuses the primary color so it reads as tappable. */
 .md3 .cc-terms {
   margin-top: 9px;
+  margin-bottom: 10px;
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 13px;
-  line-height: 15px;
+  font-size: 12px;
+  line-height: 14px;
   color: #0e2238;
 }
 .md3 .cc-terms-dot {
@@ -4936,6 +5000,7 @@ line-height: 31px;
   line-height: 15px;
   letter-spacing: -0.03em;
   color: #0e2238;
+  text-decoration: underline;
   cursor: pointer;
 }
 /* card CTA row (Angebot anfragen / phone / Rate anpassen) — the shared .mbtn padding (0 24px)
@@ -4995,6 +5060,12 @@ line-height: 31px;
   border-bottom: 1px solid var(--md-outline-variant);
   margin-bottom: 18px;
 }
+/* VDP FinanceCalculator card only — scoped so it doesn't touch .vdp-bottom-bar / .fin-modal-body /
+   .vdp-aside's own .fin-tabs margins (desktop base + mobile override above are both 1-class, so
+   this 2-class selector wins purely on specificity regardless of viewport or source order). */
+.md3 .fin-calc-card .fin-tabs {
+  margin-bottom: 10px;
+}
 .md3 .fin-tab {
   flex: 1;
   background: none;
@@ -5035,7 +5106,7 @@ line-height: 31px;
   grid-template-areas: "rate pill" "cond bar";
   gap: 12px 16px;
   align-items: center;
-  margin-top: 8px;
+  margin-top: 0;
 }
 .md3 .fin-rate-main {
   grid-area: rate;
@@ -5488,7 +5559,24 @@ line-height: 31px;
 }
 .md3 .bb-tabs .fin-tab {
   padding: 15px 14px 10px 14px;
-  font-size: 13.5px;
+}
+/* :not(.on) — a later, equal-specificity mobile rule (.md3 .fin-tab:not(.on), Figma "dark +
+   bold" spec for the desktop-style tabs) would otherwise win on source order alone; matching
+   its :not(.on) here brings this to 4 classes vs its 3 so bb-tabs always wins regardless of
+   where either rule sits in the file. */
+.md3 .bb-tabs .fin-tab:not(.on) {
+  font-family: 'Arial';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #0E2238;
+}
+.md3 .bb-tabs .fin-tab.on {
+  font-family: 'Arial';
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  color: #005CFF;
 }
 .md3 .bb-price-row .num.num--len5 {
   font-size: 42px;
@@ -7994,15 +8082,6 @@ color: #005CFF;
     line-height: 9px;
     color: #111820;
   }
-  /* "z.B. 499 €² / mtl.³" representative-example line under the hero rate */
-  .md3 .fin-rate-main .fin-rate-example-label {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
-    font-weight: 700;
-    font-size: 10px;
-    line-height: 11px;
-    color: #5b6b7f;
-  }
   .md3 .fin-rate-main .fin-rate-example-price {
     position: relative;
     display: inline-block;

package/utils/financeFormat.ts

@@ -1,62 +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('; ')};`;
-}
+// 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/priceRating.ts

@@ -1,58 +1,58 @@
-// 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) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-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;
-};
+// 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) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+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;
+};