@bytebrand/fe-ui-core-autobahn 1.0.81 → 1.0.83

package/cards/CarCard.tsx

@@ -102,6 +102,14 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   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);
+  // 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;
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -162,7 +170,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
                   color: '#005CFF',
                 }}
               />
-              {car.isNew && <span className="neu-badge">NEU</span>}
+              {showNeu && <span className="neu-badge">NEU</span>}
             </div>
             <OfferBadge show={showOfferBadge} t={t} />
           </div>

package/cards/CarRow.tsx

@@ -60,13 +60,36 @@ export interface CarRowProps {
    * Rendered as a quiet button under the CTA; the page decides visibility (JWT claim).
    */
   adminAction?: { label: string; onClick: () => void };
+  /**
+   * takes over the desktop price column's "Details" links (financing/leasing terms rows) — e.g.
+   * navigate to this car's own VDP and open its finance modal already expanded, on the tab the
+   * link was under. Optional/page-owned like CarCard's identically-named prop; when omitted the
+   * links render as plain text (see PricePaths' own fallback).
+   */
+  onShowFinancingDetails?: (car: AutobahnCar, mode: PaymentMode) => void;
 }
 
-const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggleFavorite, onOpen, onMediaEnter, t, adminAction }) => {
+const CarRow: React.FunctionComponent<CarRowProps> = ({
+  car,
+  isFavorite,
+  onToggleFavorite,
+  onOpen,
+  onMediaEnter,
+  t,
+  adminAction,
+  onShowFinancingDetails,
+}) => {
   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);
+  // 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 facts: Array<[icon: string, value: string]> = [
     ['gauge', fmtKm(car.km)],
     ['calendar', t('autobahn:card.specs.firstRegistration', { reg: car.reg })],
@@ -106,7 +129,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           }}
         >
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
-            {car.isNew && <span className="neu-badge">NEU</span>}
+            {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
@@ -259,7 +282,12 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           <PpActivity t={t} car={car} />
         </div>
 
-        <PricePaths car={car} t={t} className="hide-mobile" />
+        <PricePaths
+          car={car}
+          t={t}
+          className="hide-mobile"
+          onShowDetails={onShowFinancingDetails ? (mode) => onShowFinancingDetails(car, mode) : undefined}
+        />
         <div className="pp-purchase hide-mobile">
           <PriceKauf car={car} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>

package/cards/cardParts.tsx

@@ -386,6 +386,11 @@ export interface PricePathsProps {
   t: TranslationFunction;
   /** extra class appended to the root (e.g. the SRP card's desktop-only `hide-mobile` marker). */
   className?: string;
+  /** takes over the financing/leasing terms rows' own "Details" links — e.g. navigate to this
+   *  car's VDP and open its finance modal already expanded, on the tab the link was under
+   *  (financing/leasing). Optional/page-owned like CarCard's onShowFinancingDetails; when
+   *  omitted the links render as plain (non-interactive) text, same as before this prop existed. */
+  onShowDetails?: (mode: PaymentMode) => void;
 }
 
 /** Map the AutobahnCar rating tone → meter segment index (0 best … 4 worst). */
@@ -926,7 +931,7 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  * is omitted entirely when leasing isn't active. The Kaufen row is rendered separately
  * (PriceKauf) below a divider so only the financing rate stands out — no wall of blue prices.
  */
-export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className }) => {
+export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, className, onShowDetails }) => {
   const hasLease = car.lease != null;
   // Terms of the config the displayed rate was actually computed with (per-car:
   // dealer rate + the user's saved localStorage adjustments) — default config
@@ -938,6 +943,21 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
   const leasMileageStr = leasMileage ? Number(leasMileage).toLocaleString('de-DE') : '';
+  const detailsLink = (mode: PaymentMode): React.ReactNode =>
+    onShowDetails ? (
+      <button
+        type="button"
+        className="pp-details-link"
+        onClick={(e) => {
+          e.stopPropagation();
+          onShowDetails(mode);
+        }}
+      >
+        {t('autobahn:card.price.details')}
+      </button>
+    ) : (
+      <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+    );
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-eyebrow">{t('autobahn:card.price.financingFrom')}</div>
@@ -952,7 +972,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           months: finMonths,
           count: finMonths,
         })}{' '}
-        · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+        · {detailsLink('financing')}
       </div>
       {hasLease && (
         <div className="pp-lease-row">
@@ -967,7 +987,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
                 months: leasMonths,
                 mileage: leasMileageStr,
               })}{' '}
-              · <span className="pp-details-link">{t('autobahn:card.price.details')}</span>
+              · {detailsLink('leasing')}
             </div>
           )}
         </div>

package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -30,11 +30,11 @@ const ManageCookieModal = ({ toggleModal, handleSentryInit } : IManageCookieModa
     () => {
       const newAnalyticsSwitches = Object.values(COOKIE_SCHEMA.analytics)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
 
       const newMarketingSwitches = Object.values(COOKIE_SCHEMA.marketing)
         .reduce((acc, val) => acc.concat(val), [])
-        .reduce((acc, item) => ({ ...acc, [item]: false }), {});
+        .reduce((acc, item) => ({ ...acc, [item]: true }), {});
       setAnalyticsSwitches(newAnalyticsSwitches);
       setMarketingSwitches(newMarketingSwitches);
     },

package/compat/MdAccordionGroup/MdAccordionGroup.tsx

@@ -45,7 +45,7 @@ const MdAccordionGroup: React.FC<IMdAccordionGroupProps> = ({ title, tooltipText
         ) : null}
         <Icon name='chevron-down' cls='macc-chev' />
       </div>
-      {open ? <div style={{ padding: '4px 0 12px' }}>{children}</div> : null}
+      {open ? <div style={{ padding: '4px 15px 12px' }}>{children}</div> : null}
     </section>
   );
 };

package/locales/de/autobahn.json

@@ -107,9 +107,12 @@
     "addServicesPerMonth": "+{{value}} € / Monat",
     "addServicesOnce": "+{{value}} €",
     "addServicesIncluded": "inklusive",
-    "addServicesTooltipIntro": "Das Rundum-Sorglos-Paket ist Bestandteil des Angebots und im Kaufpreis enthalten.",
+    "addServicesTooltipIntroCash": "Das Rundum-Sorglos-Paket ist Bestandteil des Angebots und im Kaufpreis enthalten.",
+    "addServicesTooltipIntroFinanced": "Das Rundum-Sorglos-Paket ist verpflichtender Bestandteil des Angebots. Die Kosten fallen unabhängig von der gewählten Zahlungsweise an.",
     "addServicesTooltipHeading": "Im Rundum-Sorglos-Paket enthalten:",
-    "addServicesTooltipItems": "kompletter Zulassungsservice inklusive Wunschkennzeichen, soweit verfügbar\nsorgfältige Prüfung und Vorbereitung aller Zulassungsunterlagen\nbundesweite Fahrzeugauslieferung bis vor Ihre Haustür\npersönliche Fahrzeugübergabe\nhochwertige Fahrzeugaufbereitung innen und außen\nausführlicher technischer Übergabecheck\nHU und Inspektion, falls erforderlich\nTank- beziehungsweise Ladegrundfüllung bei Übergabe\npersönlicher Ansprechpartner von Beginn an"
+    "addServicesTooltipItems": "kompletter Zulassungsservice inklusive Wunschkennzeichen, soweit verfügbar\nsorgfältige Prüfung und Vorbereitung aller Zulassungsunterlagen\nbundesweite Fahrzeugauslieferung bis vor Ihre Haustür\npersönliche Fahrzeugübergabe\nhochwertige Fahrzeugaufbereitung innen und außen\nausführlicher technischer Übergabecheck\nHU und Inspektion, falls erforderlich\nTank- beziehungsweise Ladegrundfüllung bei Übergabe\npersönlicher Ansprechpartner von Beginn an",
+    "addServicesTooltipOutroFinancing": "Sie können die Paketkosten entweder einmalig in Höhe von 1.499,00 € bezahlen oder in die Fahrzeugfinanzierung einbeziehen lassen. Bei der Mitfinanzierung wird keine zusätzliche Einmalzahlung für das Paket erhoben. Die gewählte Zahlungsweise sowie die daraus resultierende monatliche Finanzierungsrate und der Gesamtbetrag werden in den Finanzierungsdetails ausgewiesen. Die Paketkosten sind in jedem Fall im ausgewiesenen Gesamtbetrag berücksichtigt.",
+    "addServicesTooltipOutroLeasing": "Sie können die Paketkosten entweder einmalig in Höhe von 1.499,00 € bezahlen oder in die monatliche Leasingrate einrechnen lassen. Bei der Rateneinrechnung wird keine zusätzliche Einmalzahlung für das Paket erhoben. Die gewählte Zahlungsweise sowie die daraus resultierende Monatsrate und der Gesamtbetrag werden in den Leasingdetails ausgewiesen. Die Paketkosten sind in jedem Fall im ausgewiesenen Gesamtbetrag berücksichtigt."
   },
   "specTable": {
     "title": "Fahrzeugdaten",

package/locales/en/autobahn.json

@@ -107,9 +107,12 @@
     "addServicesPerMonth": "+€{{value}} / month",
     "addServicesOnce": "+€{{value}}",
     "addServicesIncluded": "included",
-    "addServicesTooltipIntro": "The all-round care package is part of the offer and included in the purchase price.",
+    "addServicesTooltipIntroCash": "The all-round care package is part of the offer and included in the purchase price.",
+    "addServicesTooltipIntroFinanced": "The all-round care package is a mandatory part of the offer. Its cost applies regardless of the payment method chosen.",
     "addServicesTooltipHeading": "Included in the all-round care package:",
-    "addServicesTooltipItems": "complete registration service including a custom license plate, where available\ncareful review and preparation of all registration documents\nnationwide vehicle delivery to your doorstep\npersonal vehicle handover\nhigh-quality interior and exterior vehicle detailing\ndetailed technical handover check\nroadworthiness test (HU) and inspection, if required\nfuel or charge top-up at handover\npersonal point of contact from day one"
+    "addServicesTooltipItems": "complete registration service including a custom license plate, where available\ncareful review and preparation of all registration documents\nnationwide vehicle delivery to your doorstep\npersonal vehicle handover\nhigh-quality interior and exterior vehicle detailing\ndetailed technical handover check\nroadworthiness test (HU) and inspection, if required\nfuel or charge top-up at handover\npersonal point of contact from day one",
+    "addServicesTooltipOutroFinancing": "You can either pay the package cost as a one-off amount of €1,499.00, or have it included in the vehicle financing. If included in financing, no separate one-off payment for the package is charged. The payment method you choose, along with the resulting monthly financing rate and total amount, is shown in the financing details. The package cost is included in the total amount shown in either case.",
+    "addServicesTooltipOutroLeasing": "You can either pay the package cost as a one-off amount of €1,499.00, or have it included in the monthly leasing rate. If included in the rate, no separate one-off payment for the package is charged. The payment method you choose, along with the resulting monthly rate and total amount, is shown in the leasing details. The package cost is included in the total amount shown in either case."
   },
   "specTable": {
     "title": "Vehicle data",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "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

@@ -4447,7 +4447,18 @@ line-height: 31px;
 .md3 .listcard-price .pricepaths .pp-hero-terms { font-size: 10.5px; }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */
-.md3 .pp-details-link { color: var(--md-primary); text-decoration: underline; font-weight: 600; white-space: nowrap; }
+.md3 .pp-details-link {
+  border: 0;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: var(--md-primary);
+  text-decoration: underline;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
 /* z.B./old-rate/unit column beside the CarCard hero figure — mirrors .fin-rate-unit
    (FinanceCalculator.tsx/md3.css) exactly; only used inside .cc-price's PriceHero. */
 .md3 .pp-hero-unit-group {
@@ -7184,13 +7195,21 @@ color: #005CFF;
   width: auto;
   z-index: 20;
   margin-bottom: 10px;
-  max-height: 260px;
   cursor: default;
 }
 .md3 .fin-modal .fin-toggle-addservices--cash .fin-toggle-tooltip {
   top: auto;
   bottom: auto;
 }
+.md3 .fin-modal .show-mobile .fin-toggle-tooltip {
+  border-radius: 11px;
+}
+/* desktop (.hide-mobile) row sits close to the top of a short, non-scrolling card — opening
+   upward has nowhere near enough room for the now-long financing/leasing copy (intro + 9
+   bullets + outro). */
+.md3 .fin-modal .hide-mobile .fin-toggle-tooltip {
+  bottom: auto;
+}
 .md3 .fin-calc-card .fin-toggle-tooltip-close,
 .md3 .fin-modal .fin-toggle-tooltip-close {
   position: absolute;

package/vdp/FinanceCalculator.tsx

@@ -261,11 +261,19 @@ export const ToggleRow: React.FunctionComponent<{
 };
 
 /** body content for the "Rundum-Sorglos-Paket" ToggleRow tooltip — intro sentence, bold heading,
- *  then the package's contents as a bullet list. Shared by every addServicesToggle ToggleRow
- *  (FinanceCalculator's own card + VdpModules' modal/mobile-sheet instances). */
-export const AddServicesTooltipBody: React.FunctionComponent<{ t: TranslationFunction }> = ({ t }) => (
+ *  the package's contents as a bullet list, then (financing/leasing only) a closing paragraph
+ *  explaining the one-off-vs-financed payment choice. Shared by every addServicesToggle
+ *  ToggleRow (FinanceCalculator's own card + VdpModules' modal/mobile-sheet instances); intro/
+ *  outro vary by mode since cash mode has no "financed into the rate" option. */
+export const AddServicesTooltipBody: React.FunctionComponent<{ t: TranslationFunction; isCash?: boolean; isLease?: boolean }> = ({
+  t,
+  isCash,
+  isLease,
+}) => (
   <>
-    <p style={{ margin: '0 0 8px' }}>{t('autobahn:finance.addServicesTooltipIntro')}</p>
+    <p style={{ margin: '0 0 8px' }}>
+      {t(isCash ? 'autobahn:finance.addServicesTooltipIntroCash' : 'autobahn:finance.addServicesTooltipIntroFinanced')}
+    </p>
     <p style={{ fontFamily: 'Arial', fontWeight: 700, fontSize: 10, lineHeight: '13px', color: '#0E2238', margin: '0 0 4px' }}>
       {t('autobahn:finance.addServicesTooltipHeading')}
     </p>
@@ -276,6 +284,11 @@ export const AddServicesTooltipBody: React.FunctionComponent<{ t: TranslationFun
           <li key={item}>{item}</li>
         ))}
     </ul>
+    {!isCash && (
+      <p style={{ margin: '8px 0 0' }}>
+        {t(isLease ? 'autobahn:finance.addServicesTooltipOutroLeasing' : 'autobahn:finance.addServicesTooltipOutroFinancing')}
+      </p>
+    )}
   </>
 );
 
@@ -826,7 +839,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
                     staticNote={t('autobahn:finance.addServicesIncluded')}
-                    tooltip={<AddServicesTooltipBody t={t} />}
+                    tooltip={<AddServicesTooltipBody t={t} isCash />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}
@@ -891,7 +904,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
-                    tooltip={<AddServicesTooltipBody t={t} />}
+                    tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}

package/vdp/VdpModules.tsx

@@ -1967,8 +1967,10 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   const [uvpTooltipOpen, setUvpTooltipOpen] = React.useState(false);
   // opened directly via the "Finanzierungsdetails" link (initialShowBreakdown) — on mobile the
   // breakdown is still gated behind its own toggle, so scroll the sheet down to reveal it instead
-  // of leaving the user at the top. Desktop always shows the breakdown inline now (no toggle), so
-  // it's excluded here — scrolling straight past the price/sliders/toggles on open was jarring.
+  // of leaving the user at the top. Desktop always shows the breakdown inline (no toggle), but it
+  // can still sit below the fold inside .fin-modal-body's own scroll area, so it gets the same
+  // treatment — whichever of the two refs is actually visible (show-mobile/hide-mobile via CSS)
+  // is the one scrolled.
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {
@@ -1976,8 +1978,8 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     setShowBreakdown(!!initialShowBreakdown);
     if (!initialShowBreakdown) return;
     const timer = window.setTimeout(() => {
-      const target = mobileBreakdownRef.current;
-      if (target && target.offsetParent !== null) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const target = [mobileBreakdownRef.current, desktopBreakdownRef.current].find((el) => el && el.offsetParent !== null);
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }, 50);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2429,7 +2431,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 checked={!!withAddServices}
                 disabled={addServicesDisabled}
                 onChange={onToggleAddServices}
-                tooltip={<AddServicesTooltipBody t={t} />}
+                tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                 tooltipCloseLabel={t('autobahn:modal.close')}
               />
             )}
@@ -2917,7 +2919,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     disabled={addServicesDisabled}
                     onChange={(checked) => onToggleAddServices && onToggleAddServices(checked)}
                     staticNote={t('autobahn:finance.addServicesIncluded')}
-                    tooltip={<AddServicesTooltipBody t={t} />}
+                    tooltip={<AddServicesTooltipBody t={t} isCash />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}
@@ -3053,7 +3055,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
-                    tooltip={<AddServicesTooltipBody t={t} />}
+                    tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}