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

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 })],
@@ -130,8 +131,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {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} compact className="show-mobile" />
             <ZeroDownChip
               t={t}
@@ -245,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/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -28,13 +28,20 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
 
   useEffect(
     () => {
+      // switches represent "is allowed" (true = allowed). Default to off (nothing
+      // allowed) unless the visitor already saved a choice on a previous visit.
+      const savedConfigRaw = localStorage.getItem('cookieConfig');
+      const savedConfig = savedConfigRaw ? JSON.parse(savedConfigRaw) : null;
+      const savedDisabledAnalytics: string[] = savedConfig?.analytics || [];
+      const savedDisabledMarketing: string[] = savedConfig?.marketing || [];
+
       const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: !!savedConfig && !savedDisabledAnalytics.includes(item) }), {});
 
       const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: !!savedConfig && !savedDisabledMarketing.includes(item) }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },
@@ -42,11 +49,9 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   );
 
   const onHandleAnalyticsSwitchValue = (value: boolean) => {
-    // per-item state is stored inverted (false = this item is on — see isChecked below),
-    // so turning the master ON (value=true) must store false on every item, not true.
     const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
 
     setAnalyticsSwitches(newAnalyticsSwitches);
     setAnalyticsMasterSwitch(value);
@@ -55,7 +60,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
   const onHandleMarketingSwitchValue = (value: boolean) => {
     const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
     .reduce((acc, val) => acc.concat(val), [])
-    .reduce((acc, item) => ({ ...acc, [item]: !value }), {});
+    .reduce((acc, item) => ({ ...acc, [item]: value }), {});
     setMarketingSwitches(newMarketingSwitches);
     setMarketingMasterSwitch(value);
   };
@@ -136,7 +141,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           {Object.keys(COOKIE_SCHEMA.analytics).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `analytics['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === false);
+            const isChecked = getItemsFromCategory.every((item: string) => analyticsSwitches[item] === true);
             return (
               <div className={styles.switchBlock} key={cookie} >
                 <span className={styles.switchBlockTitle}>{cookie}</span>
@@ -144,7 +149,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
                   value={isChecked}
-                  onChange={() => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, isChecked)}
+                  onChange={(newValue: boolean) => onHandleChangeInnerSwitchAnalytics(getItemsFromCategory, newValue)}
                 />
               </div>
             );
@@ -160,7 +165,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
           {Object.keys(COOKIE_SCHEMA.marketing).map(cookie => {
             const getItemsFromCategory = _get(COOKIE_SCHEMA, `marketing['${cookie}']`, null);
             const getLinkFromCategory = _get(COOKIE_SCHEMA_LINKS, [cookie], '');
-            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === false);
+            const isChecked = getItemsFromCategory.every((item: string) => marketingSwitches[item] === true);
             return (
               <div className={styles.switchBlock} key={cookie} >
                 <span className={styles.switchBlockTitle}>{cookie}</span>
@@ -168,7 +173,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
                 <MaterialSwitch
                   sx={{ marginLeft: 'auto' }}
                   value={isChecked}
-                  onChange={() => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, isChecked)}
+                  onChange={(newValue: boolean) => onHandleChangeInnerSwitchMarketing(getItemsFromCategory, newValue)}
                 />
               </div>
             )
@@ -177,7 +182,7 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
       </div>
       <div className={styles.buttonsContainer}>
         <Button onClick={() => onAccept()} className={classNames(styles.modalBtn, styles.outlinedBtn)} >Auswahl speichern</Button>
-        <Button onClick={() => onAccept({})} className={styles.modalBtn}>Alles akzeptieren</Button>
+        <Button onClick={() => onAccept({ marketing: [], analytics: [] })} className={styles.modalBtn}>Alles akzeptieren</Button>
       </div>
     </div>
   );

package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -3,6 +3,7 @@ import IconSVG from '../../../../iconsvg/IconSVG';
 import Button from '../../../Button/Button';
 import styles from './PreviewCookieModal.styl';
 import { updateCookieList } from '../../../../utils/CommonUtils';
+import { COOKIE_SCHEMA } from '../../../../constants/common';
 
 interface IPreviewCookieModal {
   toggleModal: () => void;
@@ -13,15 +14,15 @@ interface IPreviewCookieModal {
 const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPreviewCookieModal) => {
   const environment = window.location.origin;
   const onAcceptAll = () => {
-    localStorage.setItem('cookieConfig', JSON.stringify({}));
+    localStorage.setItem('cookieConfig', JSON.stringify({ marketing: [], analytics: [] }));
     updateCookieList(handleSentryInit);
     toggleModal();
   };
 
   const onDisableAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify({
-      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid','youtube'],
-      'analytics':['sentry','callback','locale','uid','PugT','demdex','cto_bundle','tuuid','tuuid_lu','c','CMID','CMPS','CMPRO','uuid2','um','umeh','KRTBCOOKIE_97','IDSYNC','dpm','_kuid_','visitor-id','data-c-ts','data-c','CMTS','mv_tokens','A3','mv_tokens_eu-v1','am_tokens','am_tokens_eu-v1','iteo','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
+      marketing: Object.values(COOKIE_SCHEMA.marketing).reduce((acc: string[], val: string[]) => acc.concat(val), []),
+      analytics: Object.values(COOKIE_SCHEMA.analytics).reduce((acc: string[], val: string[]) => acc.concat(val), [])
     }));
     updateCookieList(handleSentryInit);
     toggleModal();

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.85",
-  "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.87",
+  "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*/, '/ ')}