@bytebrand/fe-ui-core-autobahn 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "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",

package/vdp/VdpModules.tsx

@@ -26,7 +26,7 @@ import { TranslationFunction } from '../types';
 
 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, VehicleDetail, VdpSpec, VdpReview } from './types';
+import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { CalcRow, expanderBtnStyle, FinanceMode, Slider, TermChips } from './FinanceCalculator';
 
 const eur = (n: number): string => n.toLocaleString('de-DE');
@@ -674,18 +674,157 @@ export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehic
     );
   }
 
+  // mobile-only (2026-07-17 round 10 decision): the real market-value gauge is scoped to
+  // phone widths for now — desktop keeps its exact pre-existing needs-data behaviour
+  // (hidden unless a real price-history sparkline exists) by rendering the ORIGINAL
+  // hide-mobile grid unconditionally, so it stays byte-identical whenever hasHistory is
+  // false (today, always). Once priceHistory gets a real source, both paths coexist fine.
+  const mobileOnlyMarket = hasMarket && !hasHistory;
+
   return (
-    <div className="mcard" id="vdp-preis" style={{ padding: 22 }}>
+    <div className={'mcard' + (mobileOnlyMarket ? ' show-mobile' : '')} id="vdp-preis" style={{ padding: 22, ...(mobileOnlyMarket ? { flexDirection: 'column' } : {}) }}>
       <h2 className="md-headline-sm" style={{ marginBottom: 4 }}>
         {t('autobahn:priceMarket.heading')}
       </h2>
       <p className="md-body-sm" style={{ marginBottom: 18 }}>
         {t('autobahn:priceMarket.description')}
       </p>
-      <div className="pmv-grid">
-        {historyBlock}
-        {marketBlock}
-      </div>
+      {mobileOnlyMarket ? (
+        <>
+          {marketBlock}
+          <PriceRatingBreakdown vehicle={vehicle} t={t} />
+        </>
+      ) : (
+        <div className="pmv-grid hide-mobile">
+          {historyBlock}
+          {marketBlock}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// "Details zur Preisbewertung" expandable — criteria grid + 5-tier band list
+// (mobile-only, round 10; real data — see toVehicleDetail's getPriceRatingConfig call)
+// ---------------------------------------------------------------------------
+
+/** [tier key, tone color var]. Order matches the Figma "Bewertungskategorien" list. */
+const RATING_TIERS: ReadonlyArray<readonly [keyof PriceRatingBands, string]> = [
+  ['topPrice', 'var(--md-good)'],
+  ['goodPrice', '#4C9A2A'],
+  ['fairPrice', '#C7A61A'],
+  ['increasedPrice', '#D97B1F'],
+  ['highPrice', 'var(--md-error)'],
+];
+
+const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t: TranslationFunction }> = ({ vehicle, t }) => {
+  const [open, setOpen] = useState(false);
+  const bands = vehicle.priceRatingBands;
+  if (!bands) return null;
+
+  const totalEquipment = Object.values(vehicle.equipment || {}).reduce((s, a) => s + a.length, 0);
+  const allCriteria: ReadonlyArray<readonly [icon: string, label: string, value: string]> = [
+    ['car-front', t('autobahn:priceMarket.criteria.makeModel'), `${vehicle.make} ${vehicle.model}`],
+    ['cog', t('autobahn:priceMarket.criteria.gear'), vehicle.gear],
+    ['calendar', t('autobahn:priceMarket.criteria.reg'), vehicle.reg],
+    ['droplet', t('autobahn:priceMarket.criteria.cons'), vehicle.cons],
+    ['fuel', t('autobahn:priceMarket.criteria.fuel'), vehicle.fuel],
+    ['leaf', t('autobahn:priceMarket.criteria.co2'), vehicle.co2],
+    ['zap', t('autobahn:priceMarket.criteria.power'), vehicle.power],
+    ['palette', t('autobahn:priceMarket.criteria.color'), vehicle.color],
+    ['gauge', t('autobahn:priceMarket.criteria.km'), fmtKm(vehicle.km)],
+    ['star', t('autobahn:priceMarket.criteria.equipment'), t('autobahn:priceMarket.criteria.equipmentCount', { count: totalEquipment })],
+  ];
+  const criteria = allCriteria.filter(([, , v]) => !!v);
+
+  return (
+    <div style={{ marginTop: 18 }}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        style={{ ...expanderBtnStyle, justifyContent: 'flex-start', gap: 6, padding: '2px 0' }}
+      >
+        {t('autobahn:priceMarket.detailsLink')}
+        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={16} color="var(--md-primary)" />
+      </button>
+      {open && (
+        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 18 }}>
+          <div className="mcard mcard--filled" style={{ padding: 16 }}>
+            <div className="md-title-sm" style={{ marginBottom: 12 }}>
+              {t('autobahn:priceMarket.criteriaTitle')}
+            </div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
+              {criteria.map(([ic, label, value]) => (
+                <div key={label} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, minWidth: '44%', flex: '1 1 44%' }}>
+                  <Icon name={ic} size={17} color="var(--md-primary)" stroke={1.8} style={{ marginTop: 1, flex: 'none' }} />
+                  <span style={{ minWidth: 0 }}>
+                    <span className="md-label-sm" style={{ display: 'block' }}>
+                      {label}
+                    </span>
+                    <span className="md-title-sm" style={{ display: 'block', fontSize: 13.5 }}>
+                      {value}
+                    </span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="mcard mcard--filled" style={{ padding: 16 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+              <Icon name="bar-chart-3" size={18} color="var(--md-primary)" />
+              <div className="md-title-sm">{t('autobahn:priceMarket.categoriesTitle')}</div>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {RATING_TIERS.map(([key, color], i) => (
+                <div
+                  key={key}
+                  style={{ padding: '12px 0', borderTop: i > 0 ? '1px solid var(--md-outline-variant)' : 0 }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
+                    <span
+                      className="md-label-sm"
+                      style={{
+                        fontWeight: 700,
+                        padding: '4px 11px',
+                        borderRadius: 'var(--md-r-full)',
+                        color,
+                        background: `color-mix(in srgb, ${color} 16%, transparent)`,
+                      }}
+                    >
+                      {t(`autobahn:priceMarket.categories.${key}.label`)}
+                    </span>
+                    <span className="num md-label-sm" style={{ fontWeight: 700 }}>
+                      {eur(bands[key].min)} – {eur(bands[key].max)} €
+                    </span>
+                  </div>
+                  <p className="md-body-sm" style={{ margin: '6px 0 0' }}>
+                    {t(`autobahn:priceMarket.categories.${key}.description`)}
+                  </p>
+                </div>
+              ))}
+              <div style={{ padding: '12px 0 0', borderTop: '1px solid var(--md-outline-variant)' }}>
+                <span
+                  className="md-label-sm"
+                  style={{
+                    fontWeight: 700,
+                    padding: '4px 11px',
+                    borderRadius: 'var(--md-r-full)',
+                    color: 'var(--md-on-surface-variant)',
+                    background: 'var(--md-sc)',
+                  }}
+                >
+                  {t('autobahn:priceMarket.categories.noRating.label')}
+                </span>
+                <p className="md-body-sm" style={{ margin: '6px 0 0' }}>
+                  {t('autobahn:priceMarket.categories.noRating.description')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -1647,6 +1786,60 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
 // Customer ratings (auto.de Google reviews) — REAL data, loaded by the page
 // ---------------------------------------------------------------------------
 
+export interface ReviewsTeaserProps {
+  /** review count (REAL — reviews.length from the same WP json-quotes source). */
+  count: number;
+  /** overall Google rating average — same real aggregate CustomerRatings displays. */
+  average: number;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/**
+ * Compact "jump to reviews" teaser — mobile-only (round 10), sits between the offer card
+ * and the highlights card (Figma "Google Review Teaser / Card"). Scrolls the CustomerRatings
+ * section into view on tap; renders nothing when there are no real reviews to jump to.
+ */
+export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ count, average, t }) => {
+  if (!count) return null;
+  const go = (): void => {
+    if (typeof document === 'undefined') return;
+    const el = document.getElementById('vdp-bewertungen');
+    if (!el) return;
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+  return (
+    <button
+      type="button"
+      onClick={go}
+      className="mcard show-mobile"
+      style={{
+        width: '100%',
+        textAlign: 'left',
+        cursor: 'pointer',
+        padding: '16px 18px',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        // sits between the finance card (order:3) and the highlights card (order:4) in the
+        // mobile .vdp-grid flex flow — tie-broken to AFTER the aside by JSX/DOM source order.
+        order: 3,
+      }}
+    >
+      <span style={{ minWidth: 0 }}>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+          <Stars value={average} size={16} />
+          <span className="num md-title-sm">{average.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })}/5</span>
+        </span>
+        <span className="md-label-sm" style={{ display: 'block', marginTop: 2 }}>
+          {t('autobahn:reviews.teaserCount', { count })}
+        </span>
+      </span>
+      <Icon name="chevron-right" size={19} color="var(--md-on-surface-variant)" style={{ flex: 'none' }} />
+    </button>
+  );
+};
+
 export interface CustomerRatingsProps {
   /** the loaded reviews (REAL — from the WP json-quotes source). */
   reviews: VdpReview[];

package/vdp/index.ts

@@ -39,6 +39,7 @@ export {
   VdpBottomBar,
   InspectionBlock,
   HowItWorks,
+  ReviewsTeaser,
   CustomerRatings,
   VdpEnquiry,
   FinanceDetailsModal,
@@ -62,6 +63,7 @@ export type {
   InspectionBlockProps,
   HowItWorksProps,
   HowItWorksStep,
+  ReviewsTeaserProps,
   CustomerRatingsProps,
   VdpEnquiryProps,
   FinanceDetailsModalProps,
@@ -75,6 +77,8 @@ export type {
   VdpSpec,
   EquipmentGroups,
   PriceHistoryPoint,
+  PriceRatingBand,
+  PriceRatingBands,
   VdpReview,
   AutobahnPhev,
 } from './types';

package/vdp/types.ts

@@ -66,6 +66,25 @@ export interface PriceHistoryPoint {
   price: number;
 }
 
+/** One [min,max] EUR band of the 5-tier Preisbewertung (mirrors legacy IRatingConfig). */
+export interface PriceRatingBand {
+  min: number;
+  max: number;
+}
+
+/**
+ * The full 5-tier price-rating band breakdown (EUR), same source/math as the header's
+ * rating pill (getPriceRatingConfig(currentSalesPrice, predictedPrice)) — REAL data, not
+ * needs-data. Powers the mobile "Die auto.de Bewertungskategorien" expandable list.
+ */
+export interface PriceRatingBands {
+  topPrice: PriceRatingBand;
+  goodPrice: PriceRatingBand;
+  fairPrice: PriceRatingBand;
+  increasedPrice: PriceRatingBand;
+  highPrice: PriceRatingBand;
+}
+
 /**
  * View-model for a single vehicle as rendered by the Autobahn VDP modules.
  *
@@ -172,6 +191,9 @@ export interface VehicleDetail {
   marketHigh?: number;
   /** number of buyers currently watching this car. */
   watchers?: number;
+  /** full 5-tier Preisbewertung bands — REAL (same source as marketLow/marketHigh); powers the
+   *  mobile "Die auto.de Bewertungskategorien" breakdown. Undefined when rating is unavailable. */
+  priceRatingBands?: PriceRatingBands;
 }
 
 /**