@bytebrand/fe-ui-core-autobahn 1.0.123 → 1.0.124

package/cards/CarCard.tsx

@@ -51,8 +51,14 @@ export interface CarCardProps {
   isFavorite: boolean;
   /** toggle the favorite; the heart calls this (click is kept off the card). */
   onToggleFavorite: () => void;
-  /** fired when the card is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
+  /** fired when the card is clicked (opens the detail page). The second argument is the payment
+   *  tab the card was showing at click time (ADV-181) — pages forward it to the VDP via the
+   *  `?mode=` query flag so the originating card and the CDP always agree on the product. */
+  onOpen: (car: AutobahnCar, mode?: PaymentMode) => void;
+  /** ADV-181 — fired when the user explicitly switches the card's payment tab. Pages use it to
+   *  persist the per-car product choice (FinancingStore.setSelectedProduct) + analytics. The
+   *  card still owns the visual tab state; this is a notification, not a controlled input. */
+  onModeChange?: (mode: PaymentMode) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -113,8 +119,16 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onCall,
   onOpenRateAdjust,
   onShowFinancingDetails,
+  onModeChange,
 }) => {
-  const [mode, setMode] = useState<PaymentMode>('financing');
+  // ADV-181: start on the centrally-selected default product (cheaper valid rate of
+  // financing vs leasing, or the user's saved per-car choice) — computed by toAutobahnCar,
+  // so SSR/hydration agree. Absent (older producer) → financing, the pre-ADV-181 default.
+  const [mode, setMode] = useState<PaymentMode>(car.defaultMode ?? 'financing');
+  const changeMode = (m: PaymentMode) => {
+    setMode(m);
+    onModeChange && onModeChange(m);
+  };
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
   const mediaRef = useRef<HTMLDivElement | null>(null);
@@ -160,7 +174,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   return (
     <article
       className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car)}
+      onClick={() => onOpen(car, mode)}
       style={{ display: 'flex', flexDirection: 'column' }}
     >
       <div
@@ -275,7 +289,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
-          <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
+          <PriceTabs car={car} mode={mode} onModeChange={changeMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
             <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
             <PriceEvalCol car={car} t={t} />

package/cards/CarRow.tsx

@@ -52,8 +52,13 @@ export interface CarRowProps {
   isFavorite: boolean;
   /** toggle the favorite; the hearts call this (click is kept off the card). */
   onToggleFavorite: () => void;
-  /** fired when the card (or the CTA) is clicked (opens the detail page). */
-  onOpen: (car: AutobahnCar) => void;
+  /** fired when the card (or the CTA) is clicked (opens the detail page). The second argument is
+   *  the payment tab/product the card was showing at click time (ADV-181) — pages forward it to
+   *  the VDP via `?mode=` so the originating card and the CDP always agree on the product. */
+  onOpen: (car: AutobahnCar, mode?: PaymentMode) => void;
+  /** ADV-181 — fired when the user explicitly switches the mobile payment tab. Pages use it to
+   *  persist the per-car product choice (FinancingStore.setSelectedProduct) + analytics. */
+  onModeChange?: (mode: PaymentMode) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -92,8 +97,16 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   t,
   adminAction,
   onShowFinancingDetails,
+  onModeChange,
 }) => {
-  const [mode, setMode] = useState<PaymentMode>('financing');
+  // ADV-181: start on the centrally-selected default product (see CarCard's identical init).
+  // Drives the mobile tab switcher AND the mode reported to onOpen; the desktop branch's
+  // untabbed PricePaths reads car.defaultMode directly.
+  const [mode, setMode] = useState<PaymentMode>(car.defaultMode ?? 'financing');
+  const changeMode = (m: PaymentMode) => {
+    setMode(m);
+    onModeChange && onModeChange(m);
+  };
   const [photoIndex, setPhotoIndex] = useState(0);
   const mediaRef = useRef<HTMLDivElement | null>(null);
   // always call the LATEST onMediaEnter without re-arming the observer on every render (the
@@ -146,7 +159,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   return (
     <article
       className="mcard mcard--interactive listcard"
-      onClick={() => onOpen(car)}
+      onClick={() => onOpen(car, mode)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
@@ -268,7 +281,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           the previously-unused PricePaths/PriceKauf pair. Both variants share the same
           Preisbewertung meter + CTA, anchored to the bottom (margin-top:auto on .pp-purchase). */}
       <div className="listcard-price">
-        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
+        <PriceTabs car={car} mode={mode} onModeChange={changeMode} 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 />
@@ -287,7 +300,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car);
+                onOpen(car, mode);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}
@@ -336,7 +349,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car);
+                onOpen(car, mode);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}

package/cards/cardParts.tsx

@@ -1103,6 +1103,11 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  */
 export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className, onShowDetails }) => {
   const hasLease = car.lease != null;
+  // ADV-181: the hero rate follows the centrally-selected default product (cheaper valid rate,
+  // computed in toAutobahnCar). Leasing leads only when it actually won AND is displayable;
+  // 'buy'/absent both fall back to the financing hero (pre-ADV-181 layout) — the purchase price
+  // keeps its own PriceKauf row below either way, per the desktop rate-first rule.
+  const heroMode: PaymentMode = car.defaultMode === 'leasing' && hasLease ? 'leasing' : 'financing';
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
   // terms only when the car doesn't carry its own.
@@ -1130,42 +1135,70 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
     ) : (
       <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
     );
+  const finTermsLine = (
+    <>
+      {t('autobahn:card.price.financeTerms', {
+        firstInstallment: finFirstInstallment,
+        months: finMonths,
+        count: finMonths,
+      })}{' '}
+      · {detailsLink('financing')}
+    </>
+  );
+  const leasCompactTerms = hasLeasTerms && (
+    <div className="pp-sub-terms">
+      {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
+          wording there stays untouched, but includes the same Sonderzahlung figure.
+          Split across two lines with an explicit <br/> (column is too narrow for all
+          three figures + Details on one line) — forced right after km/Jahr so "36" and
+          "Mon." always land on the same line instead of an awkward mid-number wrap. */}
+      {t('autobahn:card.price.leaseTermsCompactLine1', {
+        firstInstallment: leasFirstInstallment,
+        mileage: leasMileageStr,
+      })}{' · '}
+      <br />
+      {t('autobahn:card.price.leaseTermsCompactLine2', { months: leasMonths })}{' '}
+      · {detailsLink('leasing')}
+    </div>
+  );
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
-      <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
-      {/* reuses PriceHero's own financing rendering — the exact same stacked "UVP-Rate ⓘ /
+      <div className="pp-eyebrow">
+        {t(heroMode === 'leasing' ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom')}
+      </div>
+      {/* reuses PriceHero's own rendering — the exact same stacked "UVP-Rate ⓘ /
           struck price / mtl." group beside the rate that .cc-price and mobile's tab switcher
           already use, so the rate + unit never fight for room in one flat row (the earlier
           hand-rolled version here put them side by side and wrapped for any 4+-digit rate). */}
-      <PriceHero car={car} mode="financing" t={t} alwaysShowUnit />
-      <div className="pp-hero-terms">
-        {t('autobahn:card.price.financeTerms', {
-          firstInstallment: finFirstInstallment,
-          months: finMonths,
-          count: finMonths,
-        })}{' '}
-        · {detailsLink('financing')}
-      </div>
-      {hasLease && (
-        <div className="pp-lease-row">
-          <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." t={t} />
+      <PriceHero car={car} mode={heroMode} t={t} alwaysShowUnit />
+      {heroMode === 'leasing' ? (
+        <>
           {hasLeasTerms && (
-            <div className="pp-sub-terms">
-              {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
-                  wording there stays untouched, but includes the same Sonderzahlung figure.
-                  Split across two lines with an explicit <br/> (column is too narrow for all
-                  three figures + Details on one line) — forced right after km/Jahr so "36" and
-                  "Mon." always land on the same line instead of an awkward mid-number wrap. */}
+            <div className="pp-hero-terms">
               {t('autobahn:card.price.leaseTermsCompactLine1', {
                 firstInstallment: leasFirstInstallment,
                 mileage: leasMileageStr,
               })}{' · '}
-              <br />
               {t('autobahn:card.price.leaseTermsCompactLine2', { months: leasMonths })}{' '}
               · {detailsLink('leasing')}
             </div>
           )}
-        </div>
+          {/* financing follows as the quiet row — same layout slot the leasing row used before. */}
+          <div className="pp-lease-row">
+            <PpRow label={t('autobahn:finance.mode.financing')} value={car.monthly} unit="mtl." t={t} />
+            <div className="pp-sub-terms">{finTermsLine}</div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="pp-hero-terms">{finTermsLine}</div>
+          {hasLease && (
+            <div className="pp-lease-row">
+              <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." t={t} />
+              {leasCompactTerms}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

package/cards/types.ts

@@ -57,6 +57,16 @@ export interface AutobahnCar {
   // --- price (always real) ---
   /** financing monthly rate in EUR — the LEAD price on every card. */
   monthly: number;
+  /**
+   * ADV-181 — which payment product leads on this card. Computed centrally by
+   * toAutobahnCar via fe-financing's pickDefaultProduct (cheaper valid rate of
+   * financing vs leasing; tie → financing; neither valid → 'buy'), then
+   * overridden by the user's saved explicit per-car selection when the fe-main
+   * transform stamped one (storeCar.selectedProduct). Cards initialise their
+   * tab state from this; absent (older producer) → 'financing', the pre-ADV-181
+   * behavior. Derived purely from card data, so SSR and hydration agree.
+   */
+  defaultMode?: 'financing' | 'leasing' | 'buy';
   /**
    * financing terms the `monthly` rate was computed with — the per-car merged
    * config (dealer rate + the user's saved localStorage adjustments, ADV-157).

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -39,10 +39,9 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  routeToActiveTab = () => {
-    const { priceTitle } = this.props;
-    localStorage.setItem('activeTabCDP', priceTitle);
-  }
+  // ADV-181: the old routeToActiveTab (localStorage 'activeTabCDP' write) was removed — its only
+  // reader was the unrouted legacy VDP sidebar, so the write was a no-op on the live site. The
+  // live VDP resolves its tab centrally (lowest-rate rule / saved per-car choice / `?mode=`).
 
   render(): React.ReactNode {
     const {
@@ -103,7 +102,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
-          onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
           href: url
         })}
@@ -188,7 +186,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
-          onClick: this.routeToActiveTab,
           className: styles.priceItemPrice,
           href: url
         })}

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -166,8 +166,8 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
       ),
         ...routeObj,
         className: wrapClasses,
-        // ADV-116: opening a CDP from a card defaults to the Financing tab.
-        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted legacy
+        // VDP sidebar) — the live VDP resolves its tab centrally.
         href: url,
         target,
         rel

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -319,8 +319,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted
+          // legacy VDP sidebar) — the live VDP resolves its tab centrally (lowest-rate rule /
+          // saved per-car choice / `?mode=` query flag).
           href: url
         })}
 
@@ -373,8 +374,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          // ADV-116: opening a CDP from a card defaults to the Financing tab.
-          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          // ADV-181: the dead activeTabCDP write removed (its only reader was the unrouted
+          // legacy VDP sidebar) — the live VDP resolves its tab centrally (lowest-rate rule /
+          // saved per-car choice / `?mode=` query flag).
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />

package/data/toAutobahnCar.ts

@@ -23,6 +23,8 @@
 // Every field path below was confirmed against the real code (file:line in
 // ./fieldMapping.ts), not guessed.
 
+import { pickDefaultProduct } from '@bytebrand/fe-financing';
+
 import { getPriceRating, getPredictablePrice } from '../utils/priceRating';
 import { formatTimestamp } from '../utils/DateUtils';
 import { getPowerLabel } from '../utils/power';
@@ -427,6 +429,27 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   const leaseMonths = leasingActive ? num(price?.leasing?.paybackPeriod) : undefined;
   const leaseFirstInstallment = leasingActive ? num(price?.leasing?.firstInstallment) : undefined;
 
+  // --- ADV-181: leading payment product — ONE central rule for every card surface. ---
+  // Automatic default = fe-financing's pickDefaultProduct on the same displayed rates the
+  // card renders (cheaper valid rate wins, tie → financing, neither valid → 'buy'). The
+  // user's saved explicit per-car choice (storeCar.selectedProduct, stamped by fe-main's
+  // transformDataForVehicles from FinancingStore) overrides the automatic rule — but only
+  // while that product is actually displayable on this card, so a stale "leasing" choice on
+  // a car that aged out of leasing eligibility falls back to the automatic rule instead of
+  // selecting a product the card can't show. Pure input → pure output: SSR (fe-landing)
+  // computes the identical value from the same payload, so hydration never flips the tab.
+  const picked = pickDefaultProduct({
+    financing: { monthlyInstallment: monthly },
+    leasing: { isActive: leasingActive, monthlyInstallment: lease ?? null },
+  });
+  const savedProduct = (storeCar as any).selectedProduct;
+  const defaultMode: 'financing' | 'leasing' | 'buy' =
+    savedProduct === 'leasing' && lease != null
+      ? 'leasing'
+      : savedProduct === 'financing' && monthly > 0
+        ? 'financing'
+        : picked.product;
+
   // --- optional: list price / savings — ONLY from a real strike price ---
   // transformDataForVehicles exposes oldMonthlyInstallment / highestPrice via
   // the financing spread, and price.historyPriceDifference. There is NO reliable
@@ -494,6 +517,7 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
     // price
     monthly,
+    defaultMode,
     ...(finFirstInstallment != null ? { finFirstInstallment } : {}),
     ...(finMonths != null ? { finMonths } : {}),
     price: purchase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.123",
+  "version": "1.0.124",
   "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",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.19",
+    "@bytebrand/fe-financing": "^5.14.20",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/vdp/VdpModules.tsx

@@ -1424,12 +1424,18 @@ export interface VdpStickyBarProps {
   show: boolean;
   /** primary CTA click. */
   onSecure?: () => void;
+  /** ADV-181: monthly rate for the CURRENTLY selected payment product (fin/leasing differ) —
+   *  falls back to vehicle.monthly (the financing rate) when omitted, the pre-ADV-181 display. */
+  monthly?: number;
+  /** ADV-181: label of the selected product ("Finanzierung"/"Leasing") — replaces the generic
+   *  "ab" eyebrow so the sticky bar's label always matches the rate it shows. */
+  productLabel?: string;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
 
 /** Desktop sticky summary bar (AS24 pattern) — docks to top, driven by `show`. */
-export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, t }) => (
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, monthly, productLabel, t }) => (
   <div className={'vdp-stickytop hide-mobile' + (show ? ' vdp-stickytop--on' : '')}>
     <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '10px 24px' }}>
       <img
@@ -1455,9 +1461,9 @@ export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehic
       </div>
       <div style={{ textAlign: 'right', flex: 'none' }}>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'flex-end' }}>
-          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
+          <span className="md-label-sm">{productLabel || t('autobahn:sticky.from')}</span>
           <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
-            {vehicle.monthly} €
+            {monthly ?? vehicle.monthly} €
           </span>
           <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
         </div>