@bytebrand/fe-ui-core-autobahn 1.0.134 → 1.0.135

package/cards/CarCard.tsx

@@ -51,14 +51,8 @@ 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). 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 when the card is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -119,16 +113,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onCall,
   onOpenRateAdjust,
   onShowFinancingDetails,
-  onModeChange,
 }) => {
-  // 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 [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
   const mediaRef = useRef<HTMLDivElement | null>(null);
@@ -174,7 +160,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   return (
     <article
       className="mcard mcard--interactive cc-card"
-      onClick={() => onOpen(car, mode)}
+      onClick={() => onOpen(car)}
       style={{ display: 'flex', flexDirection: 'column' }}
     >
       <div
@@ -289,7 +275,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={changeMode} t={t} />
+          <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 />
             <PriceEvalCol car={car} t={t} />

package/cards/CarRow.tsx

@@ -52,13 +52,8 @@ 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). 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 when the card (or the CTA) is clicked (opens the detail page). */
+  onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
   /**
@@ -97,16 +92,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   t,
   adminAction,
   onShowFinancingDetails,
-  onModeChange,
 }) => {
-  // 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 [mode, setMode] = useState<PaymentMode>('financing');
   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
@@ -159,7 +146,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   return (
     <article
       className="mcard mcard--interactive listcard"
-      onClick={() => onOpen(car, mode)}
+      onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
@@ -281,7 +268,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={changeMode} t={t} className="show-mobile" />
+        <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 />
@@ -300,7 +287,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car, mode);
+                onOpen(car);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}
@@ -349,7 +336,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
               iconRight="arrow-right"
               onClick={(e) => {
                 e.stopPropagation();
-                onOpen(car, mode);
+                onOpen(car);
               }}
             >
               {t('autobahn:card.cta.viewOffer')}

package/cards/cardParts.tsx

@@ -1103,11 +1103,6 @@ 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.
@@ -1135,70 +1130,42 @@ 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(heroMode === 'leasing' ? 'autobahn:card.price.leasingFrom' : 'autobahn:card.price.financingFrom')}
-      </div>
-      {/* reuses PriceHero's own rendering — the exact same stacked "UVP-Rate ⓘ /
+      <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
+      {/* reuses PriceHero's own financing 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={heroMode} t={t} alwaysShowUnit />
-      {heroMode === 'leasing' ? (
-        <>
+      <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} />
           {hasLeasTerms && (
-            <div className="pp-hero-terms">
+            <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>
           )}
-          {/* 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>
       )}
     </div>
   );

package/cards/types.ts

@@ -57,16 +57,6 @@ 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,9 +39,10 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  // 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=`).
+  routeToActiveTab = () => {
+    const { priceTitle } = this.props;
+    localStorage.setItem('activeTabCDP', priceTitle);
+  }
 
   render(): React.ReactNode {
     const {
@@ -102,6 +103,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
           ...routeObj,
           target,
           rel,
+          onClick: this.routeToActiveTab,
           className: priceItemCategoryClassName,
           href: url
         })}
@@ -186,6 +188,7 @@ 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-181: the dead activeTabCDP write removed (its only reader was the unrouted legacy
-        // VDP sidebar) — the live VDP resolves its tab centrally.
+        // ADV-116: opening a CDP from a card defaults to the Financing tab.
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
         href: url,
         target,
         rel

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -319,9 +319,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
-          // 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).
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
 
@@ -374,9 +373,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
-          // 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).
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />

package/data/toAutobahnCar.ts

@@ -23,8 +23,6 @@
 // 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';
@@ -429,27 +427,6 @@ 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
@@ -517,7 +494,6 @@ 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.134",
+  "version": "1.0.135",
   "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

@@ -1606,18 +1606,12 @@ 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, monthly, productLabel, t }) => (
+export const VdpStickyBar: React.FunctionComponent<VdpStickyBarProps> = ({ vehicle, image, show, onSecure, 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
@@ -1643,9 +1637,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">{productLabel || t('autobahn:sticky.from')}</span>
+          <span className="md-label-sm">{t('autobahn:sticky.from')}</span>
           <span className="num" style={{ fontWeight: 700, fontSize: 20, color: 'var(--md-primary)', letterSpacing: '-.4px' }}>
-            {monthly ?? vehicle.monthly} €
+            {vehicle.monthly} €
           </span>
           <span className="md-label-sm">{t('autobahn:sticky.perMonth')}</span>
         </div>