@bytebrand/fe-ui-core-autobahn 1.0.0

package/utils/DateUtils.ts

@@ -0,0 +1,101 @@
+import moment, { MomentInput } from 'moment';
+
+export interface IFormatTimestamp {
+  timestamp?: MomentInput;
+  format?: string;
+  parseFormat?: string;
+}
+
+export const timestampToDate = (timestamp: number) => {
+  if (!timestamp) return 'N/A';
+  const date = new Date(timestamp * 1000);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const monthFormatted = month < 10 ? `0${month}` : month;
+  return (`${monthFormatted}/${year}`);
+};
+
+// accepts ISO 8601, RFC 2822 or Unix timestamp in seconds and converts it to the given format
+// invocation without arguments creates a current UNIX timestamp in seconds
+export const formatTimestamp = ({ timestamp, format = 'X', parseFormat }: IFormatTimestamp): string => {
+  // try to parse number timestamp as unix timestamp in case if parseFormat is not specified
+  // use undefined for string timestamps with no parseFormat in hope that it will either be
+  // ISO 8601 or RFC 2822 and moment will be able to figure it out
+  let parseAs: string = parseFormat;
+  if (!parseFormat && typeof timestamp === 'number') parseAs = 'X';
+  return moment.utc(timestamp, parseAs).format(format);
+};
+
+export const getSearchYears = () => {
+  const currentYear = (new Date()).getFullYear();
+  const years = [];
+  let nextYear = currentYear;
+
+  while (nextYear >= 2011) {// tslint:disable-line
+    years.push(nextYear);
+    nextYear = nextYear - 1;
+  }
+
+  return [...years];
+};
+
+export const getCurrentYear = () => (new Date()).getFullYear();
+
+export const getMonths = (): string[] => {
+  const count = [...new Array(12)];// tslint:disable-line
+  return count.map((_, index) => (String(1 + index)));
+};
+
+export function isDateInDaysPeriod(timestamp: number, days: number) {
+  const today = new Date();
+  // tslint:disable-next-line: no-magic-numbers
+  const period = 1000 * 60 * 60 * 24 * days; // 1000 * 60 * 60 * 24 * days
+  const ms = 1000;
+  const result = !!timestamp && today.getTime() - timestamp * ms < period;
+
+  return result;
+}
+
+// for checkout datepicker
+
+export const handleMaxDate = (): string => {
+  const day = +String(new Date().getDate()).padStart(2, '0');
+  const month = String(new Date().getMonth() + 1).padStart(2, '0');
+  const year = new Date().getFullYear() - 18;
+
+  return `${month}/${day}/${year}`;
+};
+
+export const handleMaxDateForPicker = (): string => {
+  const day = String(new Date().getDate()).padStart(2, '0');
+  const month = String(new Date().getMonth() + 1).padStart(2, '0');
+  const year = new Date().getFullYear() - 18;
+
+  return `${month}/${day}/${year}`;
+};
+
+export const _minDate = new Date('01/01/1900');
+export const сheckingMinDateIsCorrect = (value: any): boolean => _minDate.getTime() < new Date(value).getTime();
+export const сheckingMaxDateIsCorrect = (value: any): boolean => new Date(handleMaxDate()).getTime() > new Date(value).getTime();
+export const checkingWhenLess18Age = (value: any): boolean => new Date().getTime() >= new Date(value).getTime();
+
+export const getYears = (minYear = 1980, maxYear = moment().year(), reverse = false): string[] => {
+  const years = [];
+  for (let i = maxYear; i >= minYear; i -= 1) {
+    years.push(`${i}`);
+  }
+
+  return reverse ? years.sort() : years;
+};
+
+export const createDateAsUTC = (date: Date): Date => new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+
+// end for checkout datepicker
+
+export const fromUTCToDateString = (UTCDate: Date) => {
+  const date = new Date(UTCDate);
+  const day = date.getUTCDate().toString().padStart(2, '0');
+  const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+  const year = date.getUTCFullYear();
+  return `${day}.${month}.${year}`;
+}

package/utils/index.ts

@@ -0,0 +1,74 @@
+// Public utils entry point: `@bytebrand/fe-ui-core-autobahn/utils`.
+//
+// Mirrors the symbol set of the legacy `@bytebrand/fe-ui-core/utils` barrel,
+// including `getDecoratedProps` (moved here with its IconContainer/Co2Widget
+// render dependencies under compat/ — fe-ui-core is being deleted).
+
+// Date utils
+
+export {
+  timestampToDate,
+  formatTimestamp,
+  getSearchYears,
+  getCurrentYear,
+  isDateInDaysPeriod,
+  handleMaxDate,
+  handleMaxDateForPicker,
+  _minDate,
+  сheckingMinDateIsCorrect,
+  сheckingMaxDateIsCorrect,
+  checkingWhenLess18Age,
+  getMonths,
+  getYears,
+  createDateAsUTC
+} from './DateUtils';
+
+// Common utils
+
+export {
+  getPriceRating,
+  getPriceRatingConfig,
+  addPrefixToKeys,
+  arrToObj,
+  checkRangeValuesOnEqual,
+  fixNumber,
+  formatMileage,
+  getChipFilterValue,
+  getFormattedPrice,
+  getGroupValuesForQuery,
+  getOfferSliders,
+  preloadNearbyImages,
+  sliceLessThan,
+  sliceMoreThan,
+  buildQueryForSearch,
+  buildBodyForRequest,
+  priceParse,
+  getUnixTimestampAfterTwoWeeks,
+  convertUnixTimestampToDays,
+  getCents,
+  getPredictablePrice,
+  setUtmParameters,
+  updateCookieList
+} from './CommonUtils';
+
+export { getEquipment, getEquipmentCount } from '../vehiclesProps/equipment';
+
+export type { IDecoratedProps, IEquipmentProps, ICarPropElement } from '../types/types';
+
+export {
+  getVehicleDetails,
+  getOverviewDetails,
+  dimensionDetails,
+  availAbilityDetails,
+  colorAndMaterialDetails
+} from '../vehiclesProps/vehicleDetails';
+
+export { getPowerLabel } from './power';
+
+export { getActualHighlights } from '../constants/highlights';
+
+export type { IValues, IFilters, IQuery } from './query';
+
+// Decorated car props (renders React UI; lives in vehiclesProps/ with its
+// IconContainer + Co2Widget dependencies under compat/).
+export { default as getDecoratedProps } from '../vehiclesProps/decoratedProps';

package/utils/power.ts

@@ -0,0 +1,11 @@
+// Pure power-label formatter, extracted from fe-ui-core's
+// source/framework/vehiclesProps/decoratedProps.tsx (which stays in fe-ui-core
+// because it drags React UI). Exactly one implementation lives here;
+// decoratedProps re-exports it for backwards compatibility.
+export const getPowerLabel = (powerKW: number, powerPS: number): string => {
+  const powerKWlabel = !!powerKW ? `${powerKW} kW ` : '';
+  const powerPSlabel = !!powerPS ? `${!!powerKW ? '(' : ''}${powerPS} PS${!!powerKW ? ')' : ''}` : '';
+  const powerKWpowerPS = `${powerKWlabel}${powerPSlabel}`;
+
+  return powerKWpowerPS;
+};

package/utils/query.ts

@@ -0,0 +1,21 @@
+// Search-query type contracts, extracted (type-only) from fe-ui-core's
+// source/framework/utils/FiltersUtils.ts. The FiltersUtils implementation
+// stays in fe-ui-core (it depends on FilterFactory / UI-side defaults) and
+// re-exports these types from here.
+export interface IValues {
+  [key: string]: any;
+  MAKE_MODEL?: any;
+}
+
+export interface IFilters {
+  absolutValues: IValues;
+  noAbsolutValues: IValues;
+  rangeValues: IValues;
+  dateValues: IValues;
+  ignoredValues?: IValues;
+  [key: string]: any;
+}
+
+export interface IQuery {
+  filters: IFilters;
+}

package/vdp/FinanceCalculator.tsx

@@ -0,0 +1,465 @@
+// Autobahn (auto.de redesign) — VDP offer / finance card (Finanzierung / Leasing /
+// Barzahlung).
+//
+// Structure (desktop rethink, tabs-on-top): payment-type TABS at the top (MD3 underline tabs),
+// then the rate (with any discount), then the "Rate anpassen" rate-editor, then the primary
+// "Angebot sichern" request CTA, and finally the Finanzierungs-/Leasingdetails info + popup link
+// at the foot. Laufzeit is chosen via chips (discrete terms), not a slider.
+//
+// CONTROLLED / PRESENTATIONAL — computes NOTHING financial: `mode`, `monthly`, `down`, `term` and
+// the slider/chip bounds all arrive as props; segment/slider/chip changes are reported back via
+// `onModeChange` / `onDownChange` / `onTermChange`. The real numbers come from `financingStore`.
+// The only local state is the `adjust` expander (pure view state).
+//
+// Renders correctly only inside a `<div className="md3">` subtree.
+
+import React, { useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Button, Icon } from '../ui';
+import { TIER_LABELS, TIER_KEYS, TIER_COLORS } from '../constants';
+
+/** Payment mode segment keys. Mirrors the design's ['fin','leasing','cash']. */
+export type FinanceMode = 'fin' | 'leasing' | 'cash';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  onChange: (value: number) => void;
+  /** formats the min/max end labels (and is reused by callers for the value). */
+  fmt?: (v: number) => React.ReactNode;
+}
+
+/**
+ * Range slider with a filled track and min/max end labels. The track fill is a
+ * linear-gradient driven by the value's position; the design's `.mslider` class
+ * styles the thumb/rail.
+ */
+export const Slider: React.FunctionComponent<SliderProps> = ({ min, max, step = 1, value, onChange, fmt = (v) => v }) => {
+  const span = max - min;
+  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
+  return (
+    <div>
+      <input
+        type="range"
+        className="mslider"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
+      />
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
+        <span className="md-label-sm">{fmt(min)}</span>
+        <span className="md-label-sm">{fmt(max)}</span>
+      </div>
+    </div>
+  );
+};
+
+export interface TermChipsProps {
+  /** the selectable term values (months), e.g. [12,24,36,48,60,72]. */
+  options: number[];
+  value: number;
+  onChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+/** Laufzeit selector — discrete term values as tappable chips (replaces the fiddly slider). */
+export const TermChips: React.FunctionComponent<TermChipsProps> = ({ options, value, onChange, t }) => (
+  <div className="term-chips" role="group" aria-label={t('autobahn:finance.termSelection')}>
+    {options.map((m) => (
+      <button
+        key={m}
+        type="button"
+        aria-pressed={m === value}
+        className={'term-chip' + (m === value ? ' on' : '')}
+        onClick={() => onChange(m)}
+      >
+        {m}
+        <span className="tc-unit">{t('autobahn:finance.monthUnit')}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export interface CalcRowProps {
+  label: React.ReactNode;
+  /** when true, drops the bottom hairline (last row). */
+  last?: boolean;
+  children?: React.ReactNode;
+}
+
+/** One label/value row inside the "Rate anpassen" / "Details" expander. */
+export const CalcRow: React.FunctionComponent<CalcRowProps> = ({ label, last, children }) => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+      gap: 12,
+      padding: '8px 0',
+      borderBottom: last ? 0 : '1px solid var(--md-outline-variant)',
+    }}
+  >
+    <span className="md-label-sm">{label}</span>
+    <span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>
+      {children}
+    </span>
+  </div>
+);
+
+export interface FinanceCalculatorProps {
+  /** active payment mode (controlled). */
+  mode: FinanceMode;
+  /** purchase price in EUR (the cash mode hero). */
+  price: number;
+  /** previous/list price — when > price, shown struck through as the UVP in cash mode (real discount). */
+  listPrice?: number;
+  /** auto.de-ID reference code — shown with the financing/leasing condition line. */
+  autoDeId?: string;
+  /** price-rating label, e.g. 'Guter Preis' — drives the Preisbewertung indicator. */
+  ratingLabel?: string;
+  /** computed monthly rate in EUR for the current mode — supplied, NOT computed here. */
+  monthly: number;
+  /** effective annual rate (%) for the current mode — supplied, NOT computed here. */
+  apr: number;
+  /** current down payment in EUR (controlled). */
+  down: number;
+  /** current term in months (controlled). */
+  term: number;
+  /** down-payment slider bounds. */
+  downMin: number;
+  downMax: number;
+  /** down-payment slider step (EUR). */
+  downStep?: number;
+  /** term slider bounds (months) — used to derive chip options when termOptions is absent. */
+  termMin: number;
+  termMax: number;
+  /** term slider step (months). */
+  termStep?: number;
+  /** the discrete selectable terms (months) for the Laufzeit chips. */
+  termOptions?: number[];
+  /** annual mileage in km (controlled) — leasing/financing Laufleistung/Jahr. Omit to hide the slider. */
+  annualMileage?: number;
+  /** annual-mileage slider bounds + step (km). */
+  annualMileageMin?: number;
+  annualMileageMax?: number;
+  annualMileageStep?: number;
+  /** annual-mileage slider changed. */
+  onAnnualMileageChange?: (km: number) => void;
+  /** phone number shown on the secondary CTA (touch only). */
+  phone?: string;
+  /** primary CTA click (Angebot sichern). */
+  onSecure?: () => void;
+  /** secondary CTA click (phone). */
+  onCall?: () => void;
+  /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal). Omit to hide the link. */
+  onShowDetails?: () => void;
+  /** mode segment changed. */
+  onModeChange: (mode: FinanceMode) => void;
+  /** down-payment slider changed. */
+  onDownChange: (down: number) => void;
+  /** term changed. */
+  onTermChange: (term: number) => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const eur = (n: number): string => n.toLocaleString('de-DE');
+
+/** build a [min..max] step range (fallback term options when none are supplied). */
+const range = (min: number, max: number, step: number): number[] => {
+  const out: number[] = [];
+  for (let v = min; v <= max; v += step || 12) out.push(v);
+  return out.length ? out : [min];
+};
+
+/** quiet primary-colored text link (Finanzierungsdetails / Details anzeigen). */
+const DetailsLink: React.FunctionComponent<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      background: 'none',
+      border: 0,
+      padding: 0,
+      cursor: 'pointer',
+      color: 'var(--md-primary)',
+      font: 'inherit',
+      fontSize: 13,
+      fontWeight: 600,
+    }}
+  >
+    <Icon name="info" size={15} color="var(--md-primary)" />
+    {label}
+  </button>
+);
+
+/** "Rate anpassen" / "Details anzeigen" expander toggle button. */
+const expanderBtnStyle: React.CSSProperties = {
+  width: '100%',
+  background: 'none',
+  border: 0,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 0 2px',
+  color: 'var(--md-primary)',
+  fontWeight: 600,
+  fontSize: 14,
+};
+
+const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
+  mode,
+  price,
+  listPrice,
+  autoDeId,
+  ratingLabel,
+  monthly,
+  down,
+  term,
+  downMin,
+  downMax,
+  downStep = 500,
+  termMin,
+  termMax,
+  termStep = 6,
+  termOptions,
+  annualMileage,
+  annualMileageMin = 5000,
+  annualMileageMax = 60000,
+  annualMileageStep = 5000,
+  onAnnualMileageChange,
+  phone = '0800 40 30 182',
+  onSecure,
+  onCall,
+  onShowDetails,
+  onModeChange,
+  onDownChange,
+  onTermChange,
+  t,
+}) => {
+  // Pure view state only — whether the adjust/details expander is open.
+  const [adjust, setAdjust] = useState(false);
+  const isCash = mode === 'cash';
+  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).
+  const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
+  const evalTier = tierIdx >= 0 ? tierIdx : 1;
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // condition summary (current selection) — the auto.de-ID lives with the details link, not here.
+  const condParts: string[] = [];
+  if (!isCash) {
+    condParts.push(
+      mode === 'leasing' && annualMileage != null
+        ? t('autobahn:finance.kmPerYear', { value: eur(annualMileage) })
+        : t('autobahn:finance.downPaymentLabel', { value: eur(down) }),
+    );
+    condParts.push(t('autobahn:finance.monthsLabel', { months: term, count: term }));
+  }
+  const condLine = condParts.join(' · ');
+
+  return (
+    <div className="mcard mcard--elevated" style={{ padding: 20 }}>
+      {/* header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
+        <span
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 'var(--md-r-full)',
+            background: 'var(--md-primary-container)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+          }}
+        >
+          <Icon name="tag" size={18} color="var(--md-on-primary-container)" />
+        </span>
+        <div style={{ fontFamily: 'var(--md-font-display)', fontSize: 18, fontWeight: 700 }}>{t('autobahn:finance.headerTitle')}</div>
+      </div>
+
+      {/* payment-type TABS on top */}
+      <div className="fin-tabs" role="tablist">
+        {(
+          [
+            ['fin', 'autobahn:finance.mode.financing'],
+            ['leasing', 'autobahn:finance.mode.leasing'],
+            ['cash', 'autobahn:finance.mode.cash'],
+          ] as Array<[FinanceMode, string]>
+        ).map(([k, labelKey]) => (
+          <button
+            key={k}
+            type="button"
+            role="tab"
+            aria-selected={mode === k}
+            className={'fin-tab' + (mode === k ? ' on' : '')}
+            onClick={() => onModeChange(k)}
+          >
+            {t(labelKey)}
+          </button>
+        ))}
+      </div>
+
+      {/* 2-col grid: rate|pill (row 1) + condLine|bar (row 2) — fixed right column prevents wrapping */}
+      <div className="fin-price-grid">
+        {/* col 1 row 1: hero rate */}
+        <div className="fin-rate-main">
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
+            <span
+              className="num"
+              style={{ fontSize: 48, fontWeight: 800, color: 'var(--md-primary)', letterSpacing: '-2px' }}
+            >
+              {isCash ? eur(price) : eur(Math.round(monthly))}
+            </span>
+            <span className="md-body-sm" style={{ fontWeight: 600 }}>
+              {isCash ? '€' : `€ ${t('autobahn:finance.perMonth')}`}
+            </span>
+          </div>
+          {isCash && <div className="md-label-sm">{t('autobahn:finance.fixedPrice')}</div>}
+          {isCash && showStrike && (
+            <div className="fin-kauf">
+              {t('autobahn:finance.uvp')} <s>{eur(listPrice as number)} €</s>
+            </div>
+          )}
+        </div>
+        {/* col 2 row 1: price-rating pill */}
+        <div>
+          {ratingLabel && (
+            <span
+              className="fin-eval-pill"
+              style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+              aria-label={t('autobahn:finance.priceRatingAria', { rating: evalTierLabel })}
+            >
+              <Icon
+                name={evalTier <= 1 ? 'check' : evalTier === 2 ? 'minus' : 'trending-up'}
+                size={14}
+                stroke={2.6}
+                color={TIER_COLORS[evalTier]}
+              />
+              {evalTierLabel}
+            </span>
+          )}
+        </div>
+        {/* col 1 row 2: condition line */}
+        <div className="fin-cond">{condLine}</div>
+        {/* col 2 row 2: gradient evaluation bar */}
+        <div>
+          {ratingLabel && (
+            <div className="fin-eval-bar">
+              <div className="fin-eval-thumb" style={{ left: `${(evalTier + 0.5) * 20}%`, borderColor: TIER_COLORS[evalTier] }} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* RATE EDIT (Rate anpassen) — between the rate and the request CTA */}
+      <div className="fin-adjust">
+        <button onClick={() => setAdjust((a) => !a)} style={expanderBtnStyle}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
+            <Icon name={isCash ? 'list' : 'sliders-horizontal'} size={16} color="var(--md-primary)" />
+            {isCash ? t('autobahn:finance.detailsShow') : t('autobahn:finance.adjustRate')}
+          </span>
+          <Icon name={adjust ? 'chevron-up' : 'chevron-down'} size={18} color="var(--md-primary)" />
+        </button>
+        {adjust &&
+          (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>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
+              <div>
+                <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 }}>
+                    {eur(down)} €
+                  </span>
+                </div>
+                <Slider
+                  min={downMin}
+                  max={downMax}
+                  step={downStep}
+                  value={down}
+                  onChange={onDownChange}
+                  fmt={(v) => `${eur(Number(v))} €`}
+                />
+              </div>
+              {annualMileage != null && onAnnualMileageChange && (
+                <div>
+                  <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 }}>
+                      {eur(annualMileage)} km
+                    </span>
+                  </div>
+                  <Slider
+                    min={annualMileageMin}
+                    max={annualMileageMax}
+                    step={annualMileageStep}
+                    value={annualMileage}
+                    onChange={onAnnualMileageChange}
+                    fmt={(v) => `${eur(Number(v))} km`}
+                  />
+                </div>
+              )}
+              <div>
+                <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>
+              </div>
+            </div>
+          ))}
+      </div>
+
+      {/* REQUEST CTA */}
+      <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
+        {t('autobahn:finance.secureOffer')}
+      </Button>
+      {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
+      <div className="fin-call">
+        <Button variant="outlined" block icon="phone" onClick={onCall}>
+          {phone}
+        </Button>
+      </div>
+
+      {/* auto.de-ID in front of the Finanzierungs-/Leasingdetails link — one row, under everything */}
+      {(autoDeId || (!isCash && onShowDetails)) && (
+        <div className="fin-info">
+          {autoDeId && <span className="fin-id">auto.de-ID {autoDeId}</span>}
+          {!isCash && onShowDetails && (
+            <DetailsLink
+              label={mode === 'leasing' ? t('autobahn:finance.leasingDetails') : t('autobahn:finance.financingDetails')}
+              onClick={onShowDetails}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FinanceCalculator;