@bytebrand/fe-ui-core-autobahn 1.0.114 → 1.0.115

package/ui/Dropdown.tsx

@@ -18,6 +18,7 @@
 // for SSR). Renders correctly only inside a `<div className="md3">` subtree.
 
 import React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import Icon from './Icon';
 
@@ -53,6 +54,22 @@ export interface DropdownProps {
   searchable?: boolean;
   /** placeholder for the search input (only used when `searchable`). */
   searchPlaceholder?: string;
+  /** restrict the combobox input to digits (numeric "up to" fields) — filters every keystroke and sets inputMode="numeric" pattern="[0-9]*". Requires `searchable`. */
+  numeric?: boolean;
+  /** allow committing a typed value that matches no option, instead of only ever allowing an exact pick from the list — for numeric "up to" fields where any amount is valid, not just the preset rungs. Committed on close (blur/Tab/click-away/Enter), not on every keystroke. Requires `searchable`. */
+  allowCustomValue?: boolean;
+  /** renders the closed-trigger label for a custom (non-list) value. Falls back to the raw value itself when omitted — pass this whenever `allowCustomValue` so the trigger reads naturally (e.g. `(v) => \`bis ${v} km\``). */
+  formatCustomLabel?: (value: string) => string;
+  /**
+   * Render the popover into a `document.body` portal instead of nesting it in place — escapes an
+   * ancestor's `overflow:hidden`/clipping (e.g. inside a collapsing Accordion region, see
+   * `.macc-region-inner` in md3.css) that would otherwise cut the option list off instead of
+   * letting it float over the following content. Position is computed from the trigger's on-screen
+   * rect, kept in sync on scroll/resize while open, and flips to open ABOVE the trigger when
+   * there isn't room below. Off by default — every existing caller keeps the simple in-place
+   * popover; opt in only at call sites with a known clipping ancestor.
+   */
+  menuPortal?: boolean;
 }
 
 const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -69,6 +86,10 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   menuAlign = 'left',
   searchable = false,
   searchPlaceholder,
+  numeric = false,
+  allowCustomValue = false,
+  formatCustomLabel,
+  menuPortal = false,
 }) => {
   const [open, setOpen] = React.useState(false);
   const [activeIndex, setActiveIndex] = React.useState(-1);
@@ -76,12 +97,19 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   const rootRef = React.useRef<HTMLDivElement | null>(null);
   const btnRef = React.useRef<HTMLButtonElement | null>(null);
   const menuRef = React.useRef<HTMLUListElement | null>(null);
+  const menuElRef = React.useRef<HTMLDivElement | null>(null);
   const searchRef = React.useRef<HTMLInputElement | null>(null);
   // stable id base for aria-activedescendant (avoids Math.random / Date.now, which are unavailable).
   const idBase = React.useMemo(() => `mselect-${Math.round(value ? value.length : 0)}-`, [value]);
 
   const selectedIndex = options.findIndex((o) => o.value === value);
   const selected = selectedIndex !== -1 ? options[selectedIndex] : undefined;
+  // a real value that just doesn't happen to match any option — only possible with
+  // allowCustomValue (e.g. a hand-typed "1421232" the preset rungs don't cover).
+  const customLabel = allowCustomValue && value && !selected
+    ? (formatCustomLabel ? formatCustomLabel(value) : value)
+    : undefined;
+  const hasValue = !!selected || customLabel !== undefined;
 
   const filteredOptions = React.useMemo(() => {
     if (!searchable || !query.trim()) return options;
@@ -106,13 +134,20 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   // re-renders. Consumed by the effect below, once that re-render has actually happened.
   const focusTriggerAfterClose = React.useRef(false);
 
-  // close + restore focus to the trigger.
-  const close = React.useCallback((focusTrigger: boolean) => {
+  // close + restore focus to the trigger. `commitTyped` (default true) commits whatever's
+  // currently typed as a custom value when `allowCustomValue` — this is what makes "just leave
+  // the field" (blur/click-away/Tab) work, not only an explicit pick from the list. Callers that
+  // already committed an explicit option (commit()) or that are cancelling (Escape) pass false.
+  const close = React.useCallback((focusTrigger: boolean, commitTyped: boolean = true) => {
+    if (allowCustomValue && commitTyped) {
+      const raw = query.trim();
+      if (raw !== value) onChange(raw);
+    }
     setOpen(false);
     setActiveIndex(-1);
     setQuery('');
     focusTriggerAfterClose.current = focusTrigger;
-  }, []);
+  }, [allowCustomValue, query, value, onChange]);
 
   React.useEffect(() => {
     if (!open && focusTriggerAfterClose.current) {
@@ -126,7 +161,10 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     setOpen(true);
     // start the keyboard highlight on the current selection (or the first option).
     setActiveIndex(selectedIndex !== -1 ? selectedIndex : 0);
-  }, [disabled, selectedIndex]);
+    // pre-fill the combobox with the current value (raw, not the formatted label) so a custom
+    // entry can be edited/replaced in place instead of always starting from a blank field.
+    if (allowCustomValue) setQuery(value || '');
+  }, [disabled, selectedIndex, allowCustomValue, value]);
 
   // when opened searchable, focus the search input instead of leaving focus on the trigger.
   // scrollIntoView first: on mobile the keyboard is about to eat ~40% of the viewport, so the
@@ -137,19 +175,84 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     if (rootRef.current && rootRef.current.scrollIntoView) {
       rootRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' });
     }
-    if (searchRef.current) searchRef.current.focus();
-  }, [open, searchable]);
+    if (searchRef.current) {
+      searchRef.current.focus();
+      // pre-filled custom value (see openMenu) starts selected, so typing immediately
+      // replaces it instead of appending — same "click a number field, type over it" feel.
+      if (allowCustomValue) searchRef.current.select();
+    }
+  }, [open, searchable, allowCustomValue]);
 
-  // click-away (guarded for SSR).
+  // click-away (guarded for SSR). menuElRef is checked too — with menuPortal the popover renders
+  // outside rootRef (at document.body), so without this every option click would look like a
+  // click-away and close the menu before the option's own onClick had a chance to fire.
   React.useEffect(() => {
     if (!open || typeof document === 'undefined') return undefined;
     const onDocMouseDown = (e: MouseEvent) => {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close(false);
+      const target = e.target as Node;
+      if (rootRef.current && rootRef.current.contains(target)) return;
+      if (menuElRef.current && menuElRef.current.contains(target)) return;
+      close(false);
     };
     document.addEventListener('mousedown', onDocMouseDown);
     return () => document.removeEventListener('mousedown', onDocMouseDown);
   }, [open, close]);
 
+  // menuPortal: a fresh div.md3 appended to body while open, so --md-* tokens and every
+  // `.md3 .mselect-*` rule still resolve at body level (same technique as ui/Modal.tsx).
+  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
+    if (!menuPortal || typeof document === 'undefined') return null;
+    const el = document.createElement('div');
+    el.className = 'md3';
+    return el;
+  }, [menuPortal]);
+
+  React.useEffect(() => {
+    if (!menuPortal || !open || !portalRoot || typeof document === 'undefined') return undefined;
+    document.body.appendChild(portalRoot);
+    return () => {
+      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
+    };
+  }, [menuPortal, open, portalRoot]);
+
+  // menuPortal position: computed from the trigger's on-screen rect (position:fixed, so it's
+  // viewport-relative — kept in sync on scroll/resize below). ESTIMATED_MENU_HEIGHT (the list's
+  // own max-height, 288px, plus the menu's padding/border) only needs to be a reasonable guess —
+  // it's used to DECIDE whether to flip above the trigger, not to size anything; the "above"
+  // placement is positioned via `bottom` instead of `top` so it grows upward regardless of its
+  // real height.
+  const ESTIMATED_MENU_HEIGHT = 300;
+  const [menuPos, setMenuPos] = React.useState<
+    { width: number; top?: number; bottom?: number; left?: number; right?: number } | null
+  >(null);
+
+  const positionMenu = React.useCallback(() => {
+    if (!menuPortal || !rootRef.current || typeof window === 'undefined') return;
+    const rect = rootRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < ESTIMATED_MENU_HEIGHT && rect.top > spaceBelow;
+    setMenuPos({
+      width: rect.width,
+      left: menuAlign === 'right' ? undefined : rect.left,
+      right: menuAlign === 'right' ? window.innerWidth - rect.right : undefined,
+      top: openAbove ? undefined : rect.bottom + 4,
+      bottom: openAbove ? window.innerHeight - rect.top + 4 : undefined,
+    });
+  }, [menuPortal, menuAlign]);
+
+  React.useEffect(() => {
+    if (!open || !menuPortal) return undefined;
+    positionMenu();
+    // capture:true — a scroll inside any nested scrollable ancestor (not just the window) must
+    // also reposition, since the trigger moves relative to the viewport either way.
+    window.addEventListener('scroll', positionMenu, true);
+    window.addEventListener('resize', positionMenu);
+    return () => {
+      window.removeEventListener('scroll', positionMenu, true);
+      window.removeEventListener('resize', positionMenu);
+    };
+  }, [open, menuPortal, positionMenu]);
+
   // keep the active option scrolled into view while navigating by keyboard.
   React.useEffect(() => {
     if (!open || activeIndex < 0 || !menuRef.current) return;
@@ -167,7 +270,9 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     const opt = filteredOptions[idx];
     if (!opt || opt.disabled) return;
     onChange(opt.value);
-    close(true);
+    // false: the explicit pick already won — don't also commit whatever's still sitting in the
+    // (now-stale) typed query behind it.
+    close(true, false);
   };
 
   // move the active highlight, skipping disabled options.
@@ -189,8 +294,15 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
       case 'ArrowUp': e.preventDefault(); move(-1); break;
       case 'Home': e.preventDefault(); setActiveIndex(filteredOptions.findIndex((o) => !o.disabled)); break;
       case 'End': e.preventDefault(); for (let i = filteredOptions.length - 1; i >= 0; i -= 1) { if (!filteredOptions[i].disabled) { setActiveIndex(i); break; } } break;
-      case 'Enter': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
-      case 'Escape': e.preventDefault(); close(true); break;
+      case 'Enter':
+        e.preventDefault();
+        // an active list match wins when there is one; otherwise, for allowCustomValue fields,
+        // Enter commits whatever's typed (same value close() would commit on blur anyway).
+        if (activeIndex >= 0) commit(activeIndex);
+        else if (allowCustomValue) close(true);
+        break;
+      // Escape cancels — close(..., false) so an in-progress custom edit is discarded, not committed.
+      case 'Escape': e.preventDefault(); close(true, false); break;
       case 'Tab': close(false); break;
       default: break;
     }
@@ -214,10 +326,43 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   if (block) wrapCls.push('mselect--block');
   if (className) wrapCls.push(className);
 
-  const label = selected ? selected.label : placeholder || '';
+  const label = selected ? selected.label : (customLabel !== undefined ? customLabel : placeholder || '');
 
   const editing = searchable && open;
 
+  // shared between the in-place popover and the menuPortal one — identical option list either way.
+  const renderMenuList = () => (
+    <ul
+      ref={menuRef}
+      id={`${idBase}list`}
+      className="mselect-list"
+      role="listbox"
+      tabIndex={-1}
+      aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+    >
+      {filteredOptions.map((opt, i) => (
+        <li key={`${opt.value}_${i}`} role="presentation">
+          <button
+            id={`${idBase}${i}`}
+            type="button"
+            role="option"
+            aria-selected={opt.value === value}
+            disabled={opt.disabled}
+            className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
+            onMouseEnter={() => setActiveIndex(i)}
+            onClick={() => commit(i)}
+          >
+            <span className="mselect-opt-label">{opt.label}</span>
+            {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
+          </button>
+        </li>
+      ))}
+      {searchable && filteredOptions.length === 0 && (
+        <li className="mselect-empty" role="presentation">Keine Treffer</li>
+      )}
+    </ul>
+  );
+
   return (
     <div className={wrapCls.join(' ')} ref={rootRef}>
       {editing ? (
@@ -232,13 +377,14 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
             className="mselect-input"
             placeholder={searchPlaceholder || placeholder}
             value={query}
-            onChange={(e) => setQuery(e.target.value)}
+            onChange={(e) => setQuery(numeric ? e.target.value.replace(/\D/g, '') : e.target.value)}
             onKeyDown={onMenuKeyDown}
             aria-label={ariaLabel}
             aria-haspopup="listbox"
             aria-expanded={open}
             aria-controls={`${idBase}list`}
             aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+            {...(numeric ? { inputMode: 'numeric' as const, pattern: '[0-9]*' } : {})}
           />
           <button type="button" className="mselect-chev-btn" aria-label="Close" onClick={() => close(true)}>
             <Icon name="chevron-down" cls="mselect-chev" />
@@ -257,42 +403,43 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
           onKeyDown={onTriggerKeyDown}
         >
           {icon && <Icon name={icon} />}
-          <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
+          <span className={'mselect-label' + (hasValue ? '' : ' mselect-label--ph')}>{label}</span>
           <Icon name="chevron-down" cls="mselect-chev" />
         </button>
       )}
-      {open && (
-        <div className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '') + (searchable ? ' mselect-menu--searchable' : '')}>
-          <ul
-            ref={menuRef}
-            id={`${idBase}list`}
-            className="mselect-list"
-            role="listbox"
-            tabIndex={-1}
-            aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+      {open && (menuPortal && portalRoot
+        ? ReactDOM.createPortal(
+            <div
+              ref={menuElRef}
+              className={'mselect-menu' + (searchable ? ' mselect-menu--searchable' : '')}
+              // menuPos is null for one frame on open, before the position effect has measured
+              // the trigger — stay invisible rather than flash at (0,0)/full-width.
+              style={
+                menuPos
+                  ? {
+                      position: 'fixed',
+                      top: menuPos.top,
+                      bottom: menuPos.bottom,
+                      left: menuPos.left,
+                      right: menuPos.right,
+                      width: menuPos.width,
+                      minWidth: menuPos.width,
+                    }
+                  : { visibility: 'hidden' }
+              }
+            >
+              {renderMenuList()}
+            </div>,
+            portalRoot,
+          )
+        : (
+          <div
+            ref={menuElRef}
+            className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '') + (searchable ? ' mselect-menu--searchable' : '')}
           >
-            {filteredOptions.map((opt, i) => (
-              <li key={`${opt.value}_${i}`} role="presentation">
-                <button
-                  id={`${idBase}${i}`}
-                  type="button"
-                  role="option"
-                  aria-selected={opt.value === value}
-                  disabled={opt.disabled}
-                  className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
-                  onMouseEnter={() => setActiveIndex(i)}
-                  onClick={() => commit(i)}
-                >
-                  <span className="mselect-opt-label">{opt.label}</span>
-                  {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
-                </button>
-              </li>
-            ))}
-            {searchable && filteredOptions.length === 0 && (
-              <li className="mselect-empty" role="presentation">Keine Treffer</li>
-            )}
-          </ul>
-        </div>
+            {renderMenuList()}
+          </div>
+        )
       )}
     </div>
   );

package/ui/FormDropdown.tsx

@@ -59,6 +59,11 @@ export interface FormDropdownProps {
   style?: React.CSSProperties;
   /** extra class on the wrapper (legacy `className`). */
   className?: string;
+  /** forwarded to the underlying Dropdown — see Dropdown.tsx's own doc comment. Escapes a known
+   *  clipping ancestor (e.g. a collapsing Accordion region) by rendering the popover into a
+   *  document.body portal instead of nesting it in place. Single-select only (isMulti unaffected —
+   *  its checklist menu doesn't go through the base Dropdown). Off by default. */
+  menuPortal?: boolean;
 }
 
 /** Raw option as it can appear in field.extra. */
@@ -86,7 +91,7 @@ function normalizeOption(opt: RawOption): { value: string; rawLabel: any; disabl
 }
 
 const FormDropdown: React.FunctionComponent<FormDropdownProps> = observer(
-  ({ field, t, namespace, isObj, isApiTranslated, isMulti, disableClearable, freeSolo, disabled, style, className, hideLabel }) => {
+  ({ field, t, namespace, isObj, isApiTranslated, isMulti, disableClearable, freeSolo, disabled, style, className, hideLabel, menuPortal }) => {
     // ---- label resolution (legacy getOptions parity) -------------------------------------------
     const labelFor = React.useCallback(
       (rawLabel: any): string => {
@@ -184,6 +189,7 @@ const FormDropdown: React.FunctionComponent<FormDropdownProps> = observer(
           ariaLabel={label}
           disabled={isDisabled}
           className={hasError ? 'mfd-invalid' : undefined}
+          menuPortal={menuPortal}
         />
         {hasError ? <span className="mfield-error-text mfd-error">{field.error}</span> : null}
       </div>

package/vdp/FinanceCalculator.tsx

@@ -201,8 +201,17 @@ export const ToggleRow: React.FunctionComponent<{
   tooltip?: React.ReactNode;
   /** aria-label for the popover's close button — required together with `tooltip`. */
   tooltipCloseLabel?: string;
-}> = ({ label, price, checked, disabled, onChange, className, staticNote, tooltip, tooltipCloseLabel }) => {
+  /** required together with `tooltip` — builds the trigger's own accessible name (see `infoLabel` below). */
+  t?: TranslationFunction;
+}> = ({ label, price, checked, disabled, onChange, className, staticNote, tooltip, tooltipCloseLabel, t }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const toggleTooltip = (e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+    setTooltipOpen((v) => !v);
+  };
+  // the visible label alone ("Rundum-Sorglos-Paket") reads as ambiguous out of context (toggle
+  // the package? show info about it?) — spell out what activating the trigger actually does.
+  const infoLabel = tooltip && t ? t('autobahn:finance.moreInfoAria', { label }) : undefined;
   return (
     <div
       className={className}
@@ -214,15 +223,40 @@ export const ToggleRow: React.FunctionComponent<{
         position: tooltip ? 'relative' : undefined,
       }}
     >
-      <span
-        className="md-title-sm"
-        style={{ display: 'inline-flex', alignItems: 'center', gap: 5, cursor: tooltip ? 'pointer' : undefined }}
-        role={tooltip ? 'button' : undefined}
-        tabIndex={tooltip ? 0 : undefined}
-        onClick={tooltip ? (e) => { e.stopPropagation(); setTooltipOpen((v) => !v); } : undefined}
-      >
+      <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
         {label}
-        {tooltip && <Icon name="info" size={13} color="var(--md-on-surface-variant)" />}
+        {/* custom info glyph (not the shared lucide "info" from the Icon registry — that name is
+            used in many unrelated places, this swap is scoped to just the Rundum-Sorglos-Paket
+            tooltip trigger). Shared by all three tabs (Finanzierung/Leasing/Kaufen) and both
+            desktop/mobile — ToggleRow itself is the one shared render for all of them. Viewbox
+            already bounds every path (1.875–13.125 within 0–15), so no clip-path needed.
+            The interactive/focusable/touch-target element is THIS icon wrapper only — the label
+            text next to it is plain, inert text, not part of the trigger. */}
+        {tooltip && (
+          <span
+            className="fin-toggle-info-trigger"
+            style={{ display: 'inline-flex', cursor: 'pointer' }}
+            role="button"
+            tabIndex={0}
+            aria-label={infoLabel}
+            aria-expanded={tooltipOpen}
+            onClick={toggleTooltip}
+            onKeyDown={(e) => {
+              // ARIA authoring practices: a role="button" element must answer to both Enter and
+              // Space, not just Enter — a native <button> gets this for free, this span doesn't.
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleTooltip(e);
+              }
+            }}
+          >
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="lucide">
+              <path d="M7.5 13.125C10.6066 13.125 13.125 10.6066 13.125 7.5C13.125 4.3934 10.6066 1.875 7.5 1.875C4.3934 1.875 1.875 4.3934 1.875 7.5C1.875 10.6066 4.3934 13.125 7.5 13.125Z" stroke="#8B98AA" strokeWidth={1.8} />
+              <path d="M7.5 7.2V10.5125" stroke="#8B98AA" strokeWidth={1.8} strokeLinecap="round" />
+              <path d="M7.5 4.8125H7.50625" stroke="#8B98AA" strokeWidth={2.4} strokeLinecap="round" />
+            </svg>
+          </span>
+        )}
       </span>
       {tooltip && tooltipOpen && (
         <div className="pp-uvp-tooltip fin-toggle-tooltip" onClick={(e) => e.stopPropagation()}>
@@ -243,8 +277,12 @@ export const ToggleRow: React.FunctionComponent<{
         </div>
       )}
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: staticNote ? 'auto' : undefined }}>
-        {price && (
-          <span className="num" style={{ fontWeight: 700, fontSize: 13.5, marginRight: staticNote ? 'auto' : undefined }}>
+        {/* staticNote (cash mode: package is always included, price already baked into the
+            fixed price above) fully replaces the price+switch pair — showing "+1.499 €" right
+            next to "inklusive" read as contradictory, so price is suppressed whenever
+            staticNote is set, not just the switch. */}
+        {price && !staticNote && (
+          <span className="num" style={{ fontWeight: 700, fontSize: 13.5 }}>
             {price}
           </span>
         )}
@@ -370,6 +408,13 @@ export interface FinanceCalculatorProps {
   onDownChange: (down: number) => void;
   /** term changed. */
   onTermChange: (term: number) => void;
+  /** whether leasing is actually offered for this car (financingConfig.leasing.isActive — same
+   *  age/mileage-gated flag SearchResultsStore.getLeasingActive stamps for the cards, see
+   *  cardParts.tsx's PriceTabs / toAutobahnCar.ts's `lease`). Default true keeps existing callers'
+   *  behavior; the VDP page passes the real computed value. Hides the Leasing tab when false,
+   *  same as the card — instead of showing a tab that would compute/display a rate the car isn't
+   *  eligible for. */
+  leasingAvailable?: boolean;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -461,6 +506,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   onModeChange,
   onDownChange,
   onTermChange,
+  leasingAvailable = true,
   t,
 }) => {
   // Pure view state only — whether the adjust/details expander is open.
@@ -518,12 +564,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
       </div>
 
-      {/* payment-type TABS on top */}
+      {/* payment-type TABS on top — Leasing omitted when the car isn't leasing-eligible, same
+          rule cardParts.tsx's PriceTabs already applies (car.lease != null there). */}
       <div className="fin-tabs" role="tablist">
         {(
           [
             ['fin', 'autobahn:finance.mode.financing'],
-            ['leasing', 'autobahn:finance.mode.leasing'],
+            ...(leasingAvailable ? ([['leasing', 'autobahn:finance.mode.leasing']] as Array<[FinanceMode, string]>) : []),
             ['cash', 'autobahn:finance.mode.cash'],
           ] as Array<[FinanceMode, string]>
         ).map(([k, labelKey]) => (
@@ -846,6 +893,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     staticNote={t('autobahn:finance.addServicesIncluded')}
                     tooltip={<AddServicesTooltipBody t={t} isCash />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
+                    t={t}
                   />
                 )}
               </>
@@ -911,6 +959,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     onChange={onToggleAddServices}
                     tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
+                    t={t}
                   />
                 )}
               </div>

package/vdp/VdpModules.tsx

@@ -1514,6 +1514,9 @@ export interface VdpBottomBarProps {
   annualMileage?: number;
   /** opens the Finanzierungs-/Leasingdetails popup (expanded); when omitted the link is hidden. */
   onShowDetails?: () => void;
+  /** whether leasing is actually offered for this car — see FinanceCalculatorProps.leasingAvailable
+   *  for the full rationale. Default true keeps existing callers' behavior. */
+  leasingAvailable?: boolean;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -1538,6 +1541,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
   term,
   annualMileage,
   onShowDetails,
+  leasingAvailable = true,
   t,
 }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
@@ -1592,7 +1596,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
           {(
             [
               ['fin', 'autobahn:finance.mode.financing'],
-              ['leasing', 'autobahn:finance.mode.leasing'],
+              ...(leasingAvailable ? ([['leasing', 'autobahn:finance.mode.leasing']] as Array<[FinanceMode, string]>) : []),
               ['cash', 'autobahn:card.price.buy'],
             ] as Array<[FinanceMode, string]>
           ).map(([k, labelKey]) => (
@@ -1963,6 +1967,9 @@ export interface FinanceDetailsModalProps {
   addServicesCostRaw?: number;
   addServicesDisabled?: boolean;
   onToggleAddServices?: (checked: boolean) => void;
+  /** whether leasing is actually offered for this car — see FinanceCalculatorProps.leasingAvailable
+   *  for the full rationale. Default true keeps existing callers' behavior. */
+  leasingAvailable?: boolean;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
 }
@@ -2020,6 +2027,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   addServicesCostRaw,
   addServicesDisabled,
   onToggleAddServices,
+  leasingAvailable = true,
   t,
 }) => {
   // mobile-only: the Finanzierungs-/Leasingdetails breakdown starts collapsed (opened via "Rate
@@ -2546,6 +2554,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 onChange={onToggleAddServices}
                 tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                 tooltipCloseLabel={t('autobahn:modal.close')}
+                t={t}
               />
             )}
             <div ref={desktopBreakdownRef} style={!isCash ? { marginTop: 18 } : undefined}>
@@ -2825,7 +2834,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 {(
                   [
                     ['fin', 'autobahn:finance.mode.financing'],
-                    ['leasing', 'autobahn:finance.mode.leasing'],
+                    ...(leasingAvailable ? ([['leasing', 'autobahn:finance.mode.leasing']] as Array<[FinanceMode, string]>) : []),
                     // this sheet is mobile-only, so the cash tab is "Kaufen" here (desktop card says "Barzahlung")
                     ['cash', 'autobahn:card.price.buy'],
                   ] as Array<[FinanceMode, string]>
@@ -3034,6 +3043,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     staticNote={t('autobahn:finance.addServicesIncluded')}
                     tooltip={<AddServicesTooltipBody t={t} isCash />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
+                    t={t}
                   />
                 )}
                 {/* pushed to the sheet's bottom edge — Figma keeps a big breathing gap above */}
@@ -3169,6 +3179,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     onChange={onToggleAddServices}
                     tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
                     tooltipCloseLabel={t('autobahn:modal.close')}
+                    t={t}
                   />
                 )}