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

package/cards/CarCard.tsx

@@ -100,17 +100,16 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
-  // 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);
+  const showSave = car.savings != null && car.savings > 600;
+  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || 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 = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
-  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  const activeDealChips = [
+    car.drop != null || showSave,
+    car.dropPct != null && car.dropPct > 0,
+    !!car.zeroDown,
+  ].filter(Boolean).length;
+  const showNeu = car.isNew && activeDealChips < 3;
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -135,7 +134,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 || showPct) && (
+        {(showOfferBadge || car.dropPct != null) && (
           <div
             className="cc-badges"
             style={{
@@ -151,8 +150,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             }}
           >
             <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 5, alignItems: 'center' }}>
-              {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-              <PercentChip pct={showPct ? car.dropPct : undefined} />
+              {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+              <PercentChip pct={car.dropPct} />
               <ZeroDownChip
                 t={t}
                 show={car.zeroDown}
@@ -206,7 +205,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} alwaysShowUnit />
+            <PriceHero car={car} mode={mode} t={t} />
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real

package/cards/CarRow.tsx

@@ -81,16 +81,15 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
-  // 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);
+  const showSave = car.savings != null && car.savings > 600;
+  const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || 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 = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
-  const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  const activeDealChips = [
+    car.drop != null || showSave,
+    car.dropPct != null && car.dropPct > 0,
+    !!car.zeroDown,
+  ].filter(Boolean).length;
+  const showNeu = car.isNew && activeDealChips < 3;
   const facts: Array<[icon: string, value: string]> = [
     ['gauge', fmtKm(car.km)],
     ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
@@ -113,10 +112,9 @@ 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, 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). */}
+        {/* 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). */}
         <div
           style={{
             position: 'absolute',
@@ -131,8 +129,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {showDrop ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <PercentChip pct={showPct ? car.dropPct : undefined} />
+            {showNeu && <span className="neu-badge">NEU</span>}
+            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
             <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
             <ZeroDownChip
               t={t}
@@ -149,7 +147,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
                 fontWeight: 700,
               }}
             />
-            {showNeu && <span className="neu-badge">NEU</span>}
+            <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
         </div>
@@ -246,7 +244,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} alwaysShowUnit />
+            <PriceHero car={car} mode={mode} t={t} />
             {car.rating && (
               <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
                 {t('autobahn:tier.' + car.rating)}

package/cards/types.ts

@@ -118,13 +118,6 @@ 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

@@ -2,8 +2,18 @@
 // BaseModalWrapper is replaced by a plain fixed overlay + centered surface.
 // Deliberately NOT the kit ui/Modal — the cookie consent dialog has no title
 // bar / close button and must not be dismissible without a choice.
+//
+// Rendered via ReactDOM.createPortal into document.body (same technique as
+// ui/Modal.tsx) rather than inline in the page tree: a React hydration-mismatch
+// error ANYWHERE else on the page (a known, separate bug — see the
+// SearchNextPage isMobile SSR/CSR mismatch) can corrupt sibling reconciliation
+// enough that an inline `position: fixed` overlay ends up mounted in the wrong
+// place in the DOM (observed: appearing as plain content below the footer
+// instead of as an overlay). A body-level portal is immune to that — its DOM
+// node never lives inside the page's own React subtree.
 
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import ModalsConfig from './ModalsConfig';
 
@@ -30,13 +40,14 @@ const SURFACE: React.CSSProperties = {
 };
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  if (!isVisible) return null;
-  return (
+  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 })}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };
 

package/data/toAutobahnCar.ts

@@ -96,22 +96,6 @@ 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).
@@ -407,10 +391,7 @@ 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.
-  // 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 isStrikeShown = !!price?.financing?.isStrikeShown;
   const highest = num(price?.financing?.highestPrice) ?? num(price?.highestPrice);
   let listPrice: number | undefined;
   let savings: number | undefined;
@@ -511,7 +492,6 @@ 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,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.87",
+  "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",

package/theme/md3.css

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

package/vdp/FinanceCalculator.tsx

@@ -757,12 +757,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                       </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
-                    className="fin-rate-example-suffix"
-                    style={oldMonthly == null ? { paddingTop: 20 } : undefined}
-                  >
+                  <span className="fin-rate-example-suffix">
                     {t('autobahn:finance.perMonth')}
                   </span>
                 </span>

package/vdp/VdpModules.tsx

@@ -1655,8 +1655,6 @@ 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',
@@ -1664,7 +1662,6 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
                     fontSize: 18,
                     lineHeight: '21px',
                     color: '#5B6B7F',
-                    ...(oldMonthly == null ? { paddingTop: 20 } : {}),
                   }}
                 >
                   {t('autobahn:bottom.perMonth').replace(/^\/\s*/, '/ ')}