@bytebrand/fe-ui-core-autobahn 1.0.76 → 1.0.78

package/utils/financeFormat.ts

@@ -1,62 +1,62 @@
-// Autobahn (auto.de redesign) — shared financing-number formatting.
-//
-// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
-// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
-// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
-// Node service.
-//
-// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
-// financing means monthly×term is NOT the total) and lives here once, not per-caller.
-
-/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
- *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
-export function formatEur(n: number): string {
-  return n.toLocaleString('de-DE');
-}
-
-/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
-export function formatPct(n: number): string {
-  return `${n.toFixed(2).replace('.', ',')} %`;
-}
-
-export interface FinanceExampleFields {
-  price: number;
-  apr: number;
-  down: number;
-  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
-  netLoanAmount?: number;
-  nominalRate?: number;
-  finalInstallment?: number;
-  grossAmount?: number;
-}
-
-export interface FinanceExampleLabels {
-  vehiclePrice: string;
-  priceSuffix: string;
-  apr: string;
-  nominal: string;
-  net: string;
-  down: string;
-  final: string;
-  gross: string;
-}
-
-/**
- * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
- * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
- * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
- * `exampleLine`, byte-for-byte).
- */
-export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
-  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
-  const parts: string[] = [
-    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
-    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
-    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
-    `${labels.net}: ${formatEur(netto)} €`,
-    `${labels.down}: ${formatEur(fields.down)} €`,
-    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
-    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
-  ];
-  return `${footnoteMarker} ${parts.join('; ')};`;
-}
+// Autobahn (auto.de redesign) — shared financing-number formatting.
+//
+// Extracted from vdp/VdpModules.tsx's FinanceDetailsModal so non-React consumers (e.g. the
+// Meta AIA marketing-image renderer) format the SAME real numbers the same way, instead of a
+// second copy drifting from the VDP's. Pure TS, no React/JSX — safe to import from a plain
+// Node service.
+//
+// The "only real figures, never a fabricated total" rule is load-bearing (legal: balloon
+// financing means monthly×term is NOT the total) and lives here once, not per-caller.
+
+/** Monetary figure → de-DE grouped string (e.g. 47400 → "47.400"). Feed rounded integers —
+ *  toLocaleString on a fractional value prints a bogus 3-decimal grouping. */
+export function formatEur(n: number): string {
+  return n.toLocaleString('de-DE');
+}
+
+/** Rate → de-DE percent string (e.g. 6.49 → "6,49 %"). */
+export function formatPct(n: number): string {
+  return `${n.toFixed(2).replace('.', ',')} %`;
+}
+
+export interface FinanceExampleFields {
+  price: number;
+  apr: number;
+  down: number;
+  /** Real config figure — falls back to price-down ONLY when genuinely absent. */
+  netLoanAmount?: number;
+  nominalRate?: number;
+  finalInstallment?: number;
+  grossAmount?: number;
+}
+
+export interface FinanceExampleLabels {
+  vehiclePrice: string;
+  priceSuffix: string;
+  apr: string;
+  nominal: string;
+  net: string;
+  down: string;
+  final: string;
+  gross: string;
+}
+
+/**
+ * The "Repräsentatives Beispiel" disclaimer line (PAngV). Only fields with a genuine value are
+ * included — nominalRate/finalInstallment/grossAmount are optional real config figures, never
+ * derived (see fields doc). Matches production wording/format exactly (VdpModules.tsx's
+ * `exampleLine`, byte-for-byte).
+ */
+export function buildFinanceExampleLine(fields: FinanceExampleFields, labels: FinanceExampleLabels, footnoteMarker = '³'): string {
+  const netto = fields.netLoanAmount != null ? fields.netLoanAmount : Math.max(0, fields.price - fields.down);
+  const parts: string[] = [
+    `${labels.vehiclePrice}: ${formatEur(fields.price)} € ${labels.priceSuffix}`,
+    ...(fields.apr > 0 ? [`${labels.apr}: ${formatPct(fields.apr)}`] : []),
+    ...(fields.nominalRate != null && fields.nominalRate > 0 ? [`${labels.nominal}: ${formatPct(fields.nominalRate)}`] : []),
+    `${labels.net}: ${formatEur(netto)} €`,
+    `${labels.down}: ${formatEur(fields.down)} €`,
+    ...(fields.finalInstallment != null && fields.finalInstallment > 0 ? [`${labels.final}: ${formatEur(fields.finalInstallment)} €`] : []),
+    ...(fields.grossAmount != null && fields.grossAmount > 0 ? [`${labels.gross}: ${formatEur(fields.grossAmount)} €`] : []),
+  ];
+  return `${footnoteMarker} ${parts.join('; ')};`;
+}

package/utils/priceRating.ts

@@ -1,58 +1,58 @@
-// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
-//
-// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
-// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
-// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
-// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
-// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
-// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
-// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
-import { priceRatings, priceRatingConfig } from '../constants/price';
-import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
-
-export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
-  const round = (value: number) => {
-    return Number.isFinite(pricePredicted)
-      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
-      : '???';
-  };
-
-  if (currentPrice === 0) {
-    console.log('Empty current price');
-  }
-
-  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
-    const { min, max } = priceRatingConfig[key];
-    return { ...acc, [key]: { min: round(min), max: round(max) } };
-  }, {}); // tslint:disable-line
-};
-
-export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
-  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
-    return predictablePrice;
-  }
-
-  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
-}
-
-export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
-  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
-  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
-
-  if (!isCorrectCurrentSalesPrice) return 0;
-
-
-  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
-
-  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
-
-  for (const key of Object.keys(ratingConfig)) {
-    const { min, max } = ratingConfig[key];
-    const TOP_PRICE = 5;
-    if (key === 'highPrice' && currentSalesPrice === max) return 1;
-    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
-    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
-  }
-
-  return 0;
-};
+// Autobahn (auto.de redesign) — Preisbewertung rating math, extracted from CommonUtils.ts.
+//
+// Pulled out on purpose: CommonUtils.ts transitively imports `../constants/Search`, which
+// `require()`s image assets (webpack-only — breaks any plain Node `require`/`tsc` consumer).
+// This file only imports `../constants/price` (zero further imports) — a pure, testable leaf
+// module. CommonUtils.ts re-exports these for existing consumers — one implementation, not a fork.
+// (image-generator's Meta AIA renderer vendors a copy of this math directly instead of depending
+// on this package — see services/image-generator/src/services/metaAia/vendoredAutobahnMath.ts —
+// so a plain-Node backend doesn't need to npm-install this whole design system's dependency tree.)
+import { priceRatings, priceRatingConfig } from '../constants/price';
+import { PREDICTABLE_PRICE_INDEX } from '../constants/core';
+
+export const getPriceRatingConfig = (currentPrice: number, pricePredicted: number) => { // tslint:disable-line
+  const round = (value: number) => {
+    return Number.isFinite(pricePredicted)
+      ? Math.round((pricePredicted * (1 + (value / 100))) / 100) * 100 // tslint:disable-line
+      : '???';
+  };
+
+  if (currentPrice === 0) {
+    console.log('Empty current price');
+  }
+
+  return Object.keys(priceRatingConfig).reduce((acc: any, key: any) => {
+    const { min, max } = priceRatingConfig[key];
+    return { ...acc, [key]: { min: round(min), max: round(max) } };
+  }, {}); // tslint:disable-line
+};
+
+export const getPredictablePrice = (currentSalesPrice: number, predictablePrice: number) => {
+  if (Number.isFinite(Number.parseFloat(`${predictablePrice}`))) {
+    return predictablePrice;
+  }
+
+  return currentSalesPrice * PREDICTABLE_PRICE_INDEX;
+}
+
+export const getPriceRating = (currentSalesPrice: number, predictablePrice: number) => {
+  const isCorrectCurrentSalesPrice = Number.isFinite(Number.parseFloat(`${currentSalesPrice}`));
+  // const isCorrectPredictablePrice = Number.isFinite(Number.parseFloat(`${predictablePrice}`));
+
+  if (!isCorrectCurrentSalesPrice) return 0;
+
+
+  const validatedPredictablePrice = getPredictablePrice(currentSalesPrice, predictablePrice);
+
+  const ratingConfig = getPriceRatingConfig(currentSalesPrice, validatedPredictablePrice);
+
+  for (const key of Object.keys(ratingConfig)) {
+    const { min, max } = ratingConfig[key];
+    const TOP_PRICE = 5;
+    if (key === 'highPrice' && currentSalesPrice === max) return 1;
+    if (key === 'topPrice' && currentSalesPrice <= min) return TOP_PRICE;
+    if (currentSalesPrice >= min && currentSalesPrice < max) return priceRatings.indexOf(key);
+  }
+
+  return 0;
+};

package/vdp/FinanceCalculator.tsx

@@ -16,7 +16,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { Button, Icon } from '../ui';
+import { Button, Icon, Switch } from '../ui';
 import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
 
 /** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
@@ -184,6 +184,41 @@ export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, ch
   </div>
 );
 
+/** full-width label(+optional trailing price) / Switch row — Switch itself is inline-flex
+ *  (track+label), so the "label ...... price switch" full-row layout can't be expressed via
+ *  Switch's `label` prop (which renders track-then-label, not a full-width justified row). */
+export const ToggleRow: React.FunctionComponent<{
+  label: string;
+  price?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  /** cash mode: the package is always included — shows a static "inklusive" note instead of the switch. */
+  staticNote?: string;
+}> = ({ label, price, checked, disabled, onChange, className, staticNote }) => (
+  <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: staticNote ? undefined : 'space-between', gap: 10 }}>
+    <span className="md-title-sm" style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+      {label}
+      <Icon name="info" size={13} color="var(--md-on-surface-variant)" />
+    </span>
+    <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 }}>
+          {price}
+        </span>
+      )}
+      {staticNote ? (
+        <span style={{ fontFamily: 'Arial', fontWeight: 400, fontSize: 15, lineHeight: '17px', color: '#0E2238' }}>
+          {staticNote}
+        </span>
+      ) : (
+        <Switch checked={checked} disabled={disabled} onChange={(e) => onChange(e.target.checked)} ariaLabel={label} />
+      )}
+    </div>
+  </div>
+);
+
 export interface FinanceCalculatorProps {
   /** active payment mode (controlled). */
   mode: FinanceMode;
@@ -226,6 +261,19 @@ export interface FinanceCalculatorProps {
   annualMileageStep?: number;
   /** annual-mileage slider changed. */
   onAnnualMileageChange?: (km: number) => void;
+  /** "Mit Schlussrate" toggle state (financing only; leasing has no balloon concept). Omit
+   *  onToggleFinalInstallment to hide the row. */
+  withFinalInstallment?: boolean;
+  onToggleFinalInstallment?: (checked: boolean) => void;
+  /** "Rundum-Sorglos-Paket" toggle state (fin/leasing). Omit addServicesCost or
+   *  onToggleAddServices to hide the row. */
+  withAddServices?: boolean;
+  addServicesCost?: number;
+  addServicesDisabled?: boolean;
+  onToggleAddServices?: (checked: boolean) => void;
+  /** Kaufen tab only — real carStore.isAvailable, drives the Verfügbarkeit row (replaces the
+   *  static Lieferung row). Same source as VdpTrustRow's "Sofort verfügbar" badge. */
+  available?: boolean;
   /** phone number shown on the secondary CTA (touch only). */
   phone?: string;
   /** primary CTA click (Angebot sichern). */
@@ -289,7 +337,7 @@ export const expanderBtnStyle: React.CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '10px 0 2px',
+  padding: '0 0 2px',
   color: 'var(--md-primary)',
   fontWeight: 600,
   fontSize: 14,
@@ -317,6 +365,13 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   annualMileageMax = 60000,
   annualMileageStep = 5000,
   onAnnualMileageChange,
+  withFinalInstallment,
+  onToggleFinalInstallment,
+  withAddServices,
+  addServicesCost,
+  addServicesDisabled,
+  onToggleAddServices,
+  available,
   phone = '0800 40 30 182',
   onSecure,
   onCall,
@@ -332,6 +387,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   // whether the "UVP-Rate" footnote popover (fin/leasing) is open — same widget as CarCard's.
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isCash = mode === 'cash';
+  const isLease = mode === 'leasing';
   const terms = termOptions && termOptions.length ? termOptions : range(termMin, termMax, termStep);
   const showStrike = listPrice != null && listPrice > price;
   // price-evaluation tier from the rating label (defaults to 'Guter Preis' tier when unmapped).
@@ -414,14 +470,20 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
       </div>
 
       {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
-      <div className="fin-price-grid" style={isCash ? { gap: '0px 16px' } : undefined}>
+      <div className={'fin-price-grid' + (isCash ? ' fin-price-grid--cash' : '')}>
         {/* col 1 row 1: hero rate — Figma: "329 €" all-big, then a small stacked column with
             the struck old rate ABOVE "/mtl." (round 11; was a single baseline row) */}
         <div className="fin-rate-main">
           {/* mobile Kaufen (Figma round 14): struck list price ABOVE the price, right-aligned,
               tight to the figure — replaces the Festpreis + UVP lines, which stay desktop-only */}
           {isCash && showStrike && (
-            <div className="show-mobile" style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}>
+            <div
+              className="show-mobile"
+              style={{ justifyContent: 'flex-end', alignItems: 'baseline', gap: 4, lineHeight: 1, marginTop: 7 }}
+              role="button"
+              tabIndex={0}
+              onClick={() => setUvpTooltipOpen((v) => !v)}
+            >
               <span style={{ fontSize: 13, color: 'var(--md-on-surface-variant)' }}>{t('autobahn:finance.uvp')}</span>
               <span
                 className={`num pp-hero-old${
@@ -465,6 +527,50 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
               </span>
             </div>
           )}
+          {/* desktop: same struck list price ABOVE the rate, same fin-rate-old-list styling +
+              clickable UVP badge/tooltip as the mobile sheet's own Kaufen block. */}
+          {isCash && showStrike && (
+            <div
+              className="hide-mobile"
+              style={{ display: 'flex', justifyContent: 'flex-end', lineHeight: 1, marginTop: 0, cursor: 'pointer' }}
+              role="button"
+              tabIndex={0}
+              onClick={() => setUvpTooltipOpen((v) => !v)}
+            >
+              <s className="num fin-rate-old fin-rate-old-list">
+                {eur(listPrice as number)} €
+                <span
+                  className="pp-eyebrow-badge"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setUvpTooltipOpen((v) => !v);
+                  }}
+                >
+                  2
+                </span>
+                {uvpTooltipOpen && (
+                  <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      type="button"
+                      className="pp-uvp-tooltip-close"
+                      aria-label={t('autobahn:modal.close')}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setUvpTooltipOpen(false);
+                      }}
+                    >
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 5L15 15M15 5L5 15" stroke="white" strokeWidth={2.4} strokeLinecap="round" />
+                      </svg>
+                    </button>
+                    <div className="pp-uvp-tooltip-body">{t('autobahn:card.price.uvpListTooltipBody')}</div>
+                  </div>
+                )}
+              </s>
+            </div>
+          )}
           <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
             {isCash ? (
               <>
@@ -486,11 +592,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                 </span>
                 <span
                   className="num hide-mobile"
-                  style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+                  style={{ fontSize: 45, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
                 >
-                  {eur(price)}
+                  {eur(price)} €<sup>1</sup>
                 </span>
-                <span className="md-body-sm hide-mobile" style={{ fontWeight: 600 }}>€</span>
               </>
             ) : (
               <>
@@ -511,7 +616,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                 <span className="fin-rate-unit">
                   {/* struck old rate (REAL oldMonthlyInstallment; SRP strikes the same source) */}
                   {oldMonthly != null && (
-                    <>
+                    <span
+                      style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => setUvpTooltipOpen((v) => !v)}
+                    >
                       <span className="pp-eyebrow">
                         {t('autobahn:card.price.uvpRateLabel')}
                         <span
@@ -561,7 +671,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                       >
                         {eur(Math.round(oldMonthly))} €
                       </s>
-                    </>
+                    </span>
                   )}
                   <span className="fin-rate-example-suffix">
                     {t('autobahn:finance.perMonth')}
@@ -571,11 +681,6 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             )}
           </div>
           {isCash && <div className="md-label-sm hide-mobile">{t('autobahn:finance.fixedPrice')}</div>}
-          {isCash && showStrike && (
-            <div className="fin-kauf hide-mobile">
-              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
-            </div>
-          )}
         </div>
         {/* col 2: pill + eval bar grouped together (display:contents on desktop — no-op,
             preserves the original rate|pill / cond|bar auto-placement; mobile turns this into
@@ -634,14 +739,18 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             (isCash ? (
               <div style={{ marginTop: 4 }}>
                 <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                  {t('autobahn:finance.deliveryValue')}
+                <CalcRow label={t('autobahn:finance.warrantyLabel')} last={!available}>
+                  {t('autobahn:finance.warrantyValue')}
                 </CalcRow>
+                {available && (
+                  <CalcRow label={t('autobahn:finance.availabilityLabel')} last>
+                    {t('autobahn:finance.availabilityValue')}
+                  </CalcRow>
+                )}
               </div>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
-                <div>
+              <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
+                <div style={{ marginBottom: 15 }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                     <span className="md-title-sm">{t('autobahn:finance.downPaymentSliderLabel')}</span>
                     <span className="num" style={{ fontWeight: 700 }}>
@@ -658,7 +767,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                   />
                 </div>
                 {annualMileage != null && onAnnualMileageChange && (
-                  <div>
+                  <div style={{ marginBottom: 15 }}>
                     <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                       <span className="md-title-sm">{t('autobahn:finance.annualMileageLabel')}</span>
                       <span className="num" style={{ fontWeight: 700 }}>
@@ -675,19 +784,32 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     />
                   </div>
                 )}
-                <div>
+                <div style={{ marginBottom: 15 }}>
                   <div className="md-title-sm" style={{ marginBottom: 8 }}>
                     {t('autobahn:finance.termSelection')}
                   </div>
-                  <TermChips options={terms} value={term} onChange={onTermChange} t={t} />
-                </div>
-                <div>
-                  <CalcRow label={t('autobahn:finance.purchasePrice')}>{eur(price)} €</CalcRow>
-                  <CalcRow label={t('autobahn:finance.warrantyLabel')}>{t('autobahn:finance.warrantyValue')}</CalcRow>
-                  <CalcRow label={t('autobahn:finance.deliveryLabel')} last>
-                    {t('autobahn:finance.deliveryValue')}
-                  </CalcRow>
+                  <TermChips options={terms.filter((v) => v !== 12 && v !== 96)} value={term} onChange={onTermChange} t={t} />
                 </div>
+                {/* same Mit-Schlussrate / Rundum-Sorglos-Paket toggles as the mobile sheet / modal
+                    desktop block — replaces the static Kaufpreis/Garantie/Lieferung rows. */}
+                {!isLease && onToggleFinalInstallment && (
+                  <ToggleRow
+                    className="fin-toggle-final"
+                    label={t('autobahn:finance.finalInstallmentToggle')}
+                    checked={!!withFinalInstallment}
+                    onChange={onToggleFinalInstallment}
+                  />
+                )}
+                {addServicesCost != null && onToggleAddServices && (
+                  <ToggleRow
+                    className={'fin-toggle-addservices' + (isLease ? ' fin-toggle-addservices--leasing' : '')}
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesPerMonth', { value: eur(Math.round(addServicesCost)) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={onToggleAddServices}
+                  />
+                )}
               </div>
             ))}
         </div>