@bytebrand/fe-ui-core-autobahn 1.0.90 → 1.0.92

package/cards/CarCard.tsx

@@ -100,16 +100,17 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
-  const showSave = car.savings != null && car.savings > 600;
-  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
+  // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
+  // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
+  const asGoodAsNew = car.asGoodAsNew !== false;
+  const showDrop = asGoodAsNew && car.drop != null;
+  const showSave = asGoodAsNew && !showDrop && car.savings != null && car.savings > 600;
+  const showPct = asGoodAsNew && car.dropPct != null && car.dropPct > 0;
+  const showOfferBadge = !!(car.isNew || showDrop || showSave || showPct || car.zeroDown);
   // PM call: the badge row only fits 3 pills — when Drop/Save + Percent + ZeroDown are all
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
-  const activeDealChips = [
-    car.drop != null || showSave,
-    car.dropPct != null && car.dropPct > 0,
-    !!car.zeroDown,
-  ].filter(Boolean).length;
-  const showNeu = car.isNew && activeDealChips < 3;
+  const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
+  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -134,7 +135,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         {/* top-left signal stack (heart is top-right): NEU badge + ONE deal signal + the
             "⚡ Angebot" badge (own line, Figma) below it. DropChip takes precedence over
             SaveChip; each only renders when its real data exists. */}
-        {(showOfferBadge || car.dropPct != null) && (
+        {(showOfferBadge || showPct) && (
           <div
             className="cc-badges"
             style={{
@@ -150,8 +151,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             }}
           >
             <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
-              {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-              <PercentChip pct={car.dropPct} />
+              {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+              <PercentChip pct={showPct ? car.dropPct : undefined} />
               <ZeroDownChip
                 t={t}
                 show={car.zeroDown}
@@ -205,7 +206,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} />
+            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real

package/cards/CarRow.tsx

@@ -81,15 +81,16 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
-  const showSave = car.savings != null && car.savings > 600;
-  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
+  // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
+  // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
+  const asGoodAsNew = car.asGoodAsNew !== false;
+  const showDrop = asGoodAsNew && car.drop != null;
+  const showSave = asGoodAsNew && !showDrop && car.savings != null && car.savings > 600;
+  const showPct = asGoodAsNew && car.dropPct != null && car.dropPct > 0;
+  const showOfferBadge = !!(car.isNew || showDrop || showSave || showPct || car.zeroDown);
   // same overflow rule as CarCard: the row only fits 3 pills, so NEU drops when the other 3 are all active.
-  const activeDealChips = [
-    car.drop != null || showSave,
-    car.dropPct != null && car.dropPct > 0,
-    !!car.zeroDown,
-  ].filter(Boolean).length;
-  const showNeu = car.isNew && activeDealChips < 3;
+  const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
+  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
   const facts: Array<[icon: string, value: string]> = [
     ['gauge', fmtKm(car.km)],
     ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
@@ -112,9 +113,10 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
         {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
             much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
         <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
-        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%, plus the "⚡ Angebot" badge
-            (Figma) on its own line below. The price RATING ('Guter Preis') is NOT here — it
-            lives in the price column (PriceMeter). */}
+        {/* deal badges — ONE compact line, Figma order: −€ (drop/save) · −% · 0 € Anz. · NEU
+            (NEU always last, dropped first on overflow — see activeDealChips below), plus the
+            "⚡ Angebot" badge (Figma) on its own line below. The price RATING ('Guter Preis') is
+            NOT here — it lives in the price column (PriceMeter). */}
         <div
           style={{
             position: 'absolute',
@@ -129,8 +131,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {showNeu && <span className="neu-badge">NEU</span>}
-            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            <PercentChip pct={showPct ? car.dropPct : undefined} />
             <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
             <ZeroDownChip
               t={t}
@@ -147,7 +149,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
                 fontWeight: 700,
               }}
             />
-            <PercentChip pct={car.dropPct} />
+            {showNeu && <span className="neu-badge">NEU</span>}
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
         </div>
@@ -244,7 +246,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
         <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
         <div className="pp-purchase show-mobile">
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-            <PriceHero car={car} mode={mode} t={t} />
+            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             {car.rating && (
               <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
                 {t('autobahn:tier.' + car.rating)}

package/cards/types.ts

@@ -118,6 +118,13 @@ export interface AutobahnCar {
   dropPct?: number;
   /** 0 € Anzahlung available (offer.showDownPayment) — drives the "0 € Anz." badge. */
   zeroDown?: boolean;
+  /**
+   * as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
+   * product rule for the drop/percent/NEU deal signals AND the strike-price/UVP-Rate display
+   * (see toAutobahnCar.ts's isStrikeShown). Independent of NEU's own showNewLabel (which also
+   * requires a recent modificationDate). Does NOT gate zeroDown.
+   */
+  asGoodAsNew?: boolean;
 
   // --- NEEDS DATA: no real source yet (NEVER fabricate) ---
   /** original list price (for the struck-through reference price). */

package/compat/CookieModal/Modal.tsx

@@ -42,9 +42,14 @@ const SURFACE: React.CSSProperties = {
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
   if (!isVisible || typeof document === 'undefined') return null;
   return ReactDOM.createPortal(
-    <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-      <div style={SURFACE}>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+    // wrapped in .md3: autobahn.css scopes every token/utility class (incl.
+    // .mbtn used by the modal buttons) under `.md3` and intentionally does
+    // nothing outside it — a bare document.body portal loses the theme.
+    <div className='md3'>
+      <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
+        <div style={SURFACE}>
+          {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+        </div>
       </div>
     </div>,
     document.body

package/data/toAutobahnCar.ts

@@ -96,6 +96,22 @@ function num(v: any): number | undefined {
   return Number.isFinite(n) ? n : undefined;
 }
 
+// strike-price ("UVP-Rate"/list-price) eligibility — a separate product rule from the NEU
+// badge's own showNewLabel (which also requires a recent modificationDate; see fe-main's
+// DataTransformers.ts shouldShowNewLabel). Here: as-good-as-new only — mileage under 1,000 km
+// AND first registration either unknown or under 12 months old. Mirrors the identical gate
+// added to VehicleDetailedNextPage.tsx's getFinancing() (VDP "Dein Angebot" card).
+const STRIKE_MAX_MILEAGE_KM = 1000;
+const STRIKE_MAX_AGE_MONTHS = 12;
+const STRIKE_AVG_MS_PER_MONTH = 1000 * 60 * 60 * 24 * 30.44;
+
+/** unix-seconds first registration (info.regDate) — unknown can't disqualify what we can't check. */
+function isStrikeAgeEligible(firstRegistration?: number | null): boolean {
+  if (firstRegistration == null || !Number.isFinite(firstRegistration) || firstRegistration <= 0) return true;
+  const ageMonths = (Date.now() - firstRegistration * 1000) / STRIKE_AVG_MS_PER_MONTH;
+  return ageMonths < STRIKE_MAX_AGE_MONTHS;
+}
+
 /**
  * Minimal de-DE fallback for the handful of cbd:* selector codes the cards show
  * (fuel + gearbox). Used only when no `t` is injected (e.g. in unit tests).
@@ -391,7 +407,10 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   // purchase-price strike on the search payload today, so we leave listPrice /
   // savings UNDEFINED unless a real highestPrice strike exists above the sale
   // price. See fieldMapping.ts — flagged for backend confirmation.
-  const isStrikeShown = !!price?.financing?.isStrikeShown;
+  // asGoodAsNew — mileage (info.mileage, same source as `km` below) + regTs (info.regDate,
+  // same raw timestamp as `reg` above) gate: see isStrikeAgeEligible.
+  const asGoodAsNew = Number(num(info.mileage) ?? 0) < STRIKE_MAX_MILEAGE_KM && isStrikeAgeEligible(regTs);
+  const isStrikeShown = !!price?.financing?.isStrikeShown && asGoodAsNew;
   const highest = num(price?.financing?.highestPrice) ?? num(price?.highestPrice);
   let listPrice: number | undefined;
   let savings: number | undefined;
@@ -492,6 +511,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     ...(dropPct != null ? { dropPct } : {}),
     ...(zeroDown ? { zeroDown } : {}),
     ...(isNew ? { isNew } : {}),
+    asGoodAsNew,
     ...(availability ? { availability } : {}),
     ...(viewsCount != null ? { viewsCount } : {}),
     ...(favoritesCount != null ? { favoritesCount } : {}),

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.90",
-  "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",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.12",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.92",
+  "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",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.12",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/theme/md3.css

@@ -4471,7 +4471,7 @@ line-height: 31px;
   flex: none;
 }
 .md3 .cc-price .pp-hero-rate {
-  align-items: center;
+  align-items: flex-end;
   flex-wrap: nowrap;
 }
 /* separator line between the financing block and the leasing row (legacy-design parity) */

package/vdp/FinanceCalculator.tsx

@@ -757,7 +757,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                       </s>
                     </span>
                   )}
-                  <span className="fin-rate-example-suffix">
+                  {/* no struck old rate above it (strike hidden) — nudge "/mtl." down so it
+                      sits level with the blue hero rate instead of centering high in the row. */}
+                  <span
+                    className="fin-rate-example-suffix"
+                    style={oldMonthly == null ? { paddingTop: 20 } : undefined}
+                  >
                     {t('autobahn:finance.perMonth')}
                   </span>
                 </span>

package/vdp/VdpModules.tsx

@@ -1655,6 +1655,8 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
                     </s>
                   </span>
                 )}
+                {/* no struck old rate above it (strike hidden) — nudge "/ mtl." down so it
+                    sits level with the blue hero rate instead of centering high in the row. */}
                 <span
                   style={{
                     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -1662,6 +1664,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
                     fontSize: 18,
                     lineHeight: '21px',
                     color: '#5B6B7F',
+                    ...(oldMonthly == null ? { paddingTop: 20 } : {}),
                   }}
                 >
                   {t('autobahn:bottom.perMonth').replace(/^\/\s*/, '/ ')}