@bytebrand/fe-ui-core-autobahn 1.0.80 → 1.0.82

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

@@ -196,27 +196,100 @@ export const ToggleRow: React.FunctionComponent<{
   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} />
+  /** when set, the info icon becomes clickable and opens a popover with this body (e.g. the
+   *  Rundum-Sorglos-Paket contents) — "Mit Schlussrate" rows omit this, keeping their icon inert. */
+  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 }) => {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  return (
+    <div
+      className={className}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: staticNote ? undefined : 'space-between',
+        gap: 10,
+        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}
+      >
+        {label}
+        {tooltip && <Icon name="info" size={13} color="var(--md-on-surface-variant)" />}
+      </span>
+      {tooltip && tooltipOpen && (
+        <div className="pp-uvp-tooltip fin-toggle-tooltip" onClick={(e) => e.stopPropagation()}>
+          <button
+            type="button"
+            className="pp-uvp-tooltip-close fin-toggle-tooltip-close"
+            aria-label={tooltipCloseLabel}
+            onClick={(e) => {
+              e.stopPropagation();
+              setTooltipOpen(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 fin-toggle-tooltip-body">{tooltip}</div>
+        </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 }}>
+            {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>
-  </div>
+  );
+};
+
+/** body content for the "Rundum-Sorglos-Paket" ToggleRow tooltip — intro sentence, bold heading,
+ *  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(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>
+    <ul style={{ margin: 0, padding: '0 0 0 14px' }}>
+      {t('autobahn:finance.addServicesTooltipItems')
+        .split('\n')
+        .map((item) => (
+          <li key={item}>{item}</li>
+        ))}
+    </ul>
+    {!isCash && (
+      <p style={{ margin: '8px 0 0' }}>
+        {t(isLease ? 'autobahn:finance.addServicesTooltipOutroLeasing' : 'autobahn:finance.addServicesTooltipOutroFinancing')}
+      </p>
+    )}
+  </>
 );
 
 export interface FinanceCalculatorProps {
@@ -278,6 +351,12 @@ export interface FinanceCalculatorProps {
   phone?: string;
   /** primary CTA click (Angebot sichern). */
   onSecure?: () => void;
+  /** true once the customer already has an offer request/checkout in progress for this car —
+   *  turns the primary CTA green (see .fin-cta-secured) instead of the default filled style. */
+  secured?: boolean;
+  /** overrides the primary CTA label while `secured` is true (e.g. "Zur Bestellung"). Ignored
+   *  when `secured` is false — the CTA keeps its own default label in that case. */
+  secureLabel?: string;
   /** secondary CTA click (phone). */
   onCall?: () => void;
   /** open the Finanzierungs-/Leasingdetails popup (full breakdown + legal, expanded). Omit to hide the link. */
@@ -374,6 +453,8 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   available,
   phone = '0800 40 30 182',
   onSecure,
+  secured,
+  secureLabel,
   onCall,
   onShowDetails,
   onOpenAdjust,
@@ -393,10 +474,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
   // 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;
-  // both green tiers ('top' and 'good') collapse onto one "Top-Preis" claim (same convention as
-  // CarCard's PriceEvalCol) — footnote 4 carries the disclaimer text.
   const isGoodTier = TIER_KEYS[evalTier] === 'good';
-  const evalTierLabel = isGoodTier ? t('autobahn:tier.top') : t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // each tier shows its own real label now (Top/Guter/Fairer/Erhöht/Hoher Preis) — no more
+  // collapsing 'good' onto the "Top-Preis" claim. Pill styling (colour/class/footnote) unchanged.
+  const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
   const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
   // condition summary (current selection) + its own details link — financing: "0 € Anzahlung ·
   // 60 Monate · Finanzierungsdetails"; leasing: "25.000 € Sonderzahlung · 60 Mon. · 10.000
@@ -456,8 +537,8 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           >
             {k === 'cash' ? (
               <>
-                {/* mockup names the cash tab "Kaufen" on phone; desktop keeps "Barzahlung" */}
-                <span className="hide-mobile">{t(labelKey)}</span>
+                {/* cash tab is "Kaufen" on both phone and desktop now — same key both spans. */}
+                <span className="hide-mobile">{t('autobahn:card.price.buy')}</span>
                 <span className="show-mobile" style={{ justifyContent: 'center' }}>
                   {t('autobahn:card.price.buy')}
                 </span>
@@ -636,7 +717,10 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                           3
                         </span>
                         {uvpTooltipOpen && (
-                          <div className="pp-uvp-tooltip" onClick={(e) => e.stopPropagation()}>
+                          <div
+                            className={'pp-uvp-tooltip' + (mode === 'leasing' ? ' pp-uvp-tooltip--leasing' : '')}
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             <button
                               type="button"
                               className="pp-uvp-tooltip-close"
@@ -737,17 +821,29 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           </button>
           {adjust &&
             (isCash ? (
-              <div style={{ marginTop: 4 }}>
-                <CalcRow label={t('autobahn:finance.paymentLabel')}>{t('autobahn:finance.paymentValue')}</CalcRow>
-                <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 style={{ marginTop: 4 }}>
+                  <CalcRow label={t('autobahn:finance.paymentLabel')} last={!available && !(addServicesCost != null && onToggleAddServices)}>{t('autobahn:finance.paymentValue')}</CalcRow>
+                  {available && (
+                    <CalcRow label={t('autobahn:finance.availabilityLabel')} last={!(addServicesCost != null && onToggleAddServices)}>
+                      {t('autobahn:finance.availabilityValue')}
+                    </CalcRow>
+                  )}
+                </div>
+                {addServicesCost != null && onToggleAddServices && (
+                  <ToggleRow
+                    className="fin-toggle-addservices fin-toggle-addservices--cash"
+                    label={t('autobahn:finance.addServicesToggle')}
+                    price={t('autobahn:finance.addServicesOnce', { value: eur(Math.round(addServicesCost)) })}
+                    checked={!!withAddServices}
+                    disabled={addServicesDisabled}
+                    onChange={onToggleAddServices}
+                    staticNote={t('autobahn:finance.addServicesIncluded')}
+                    tooltip={<AddServicesTooltipBody t={t} isCash />}
+                    tooltipCloseLabel={t('autobahn:modal.close')}
+                  />
                 )}
-              </div>
+              </>
             ) : (
               <div style={{ display: 'flex', flexDirection: 'column', marginTop: 8 }}>
                 <div style={{ marginBottom: 15 }}>
@@ -808,6 +904,8 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
                     checked={!!withAddServices}
                     disabled={addServicesDisabled}
                     onChange={onToggleAddServices}
+                    tooltip={<AddServicesTooltipBody t={t} isLease={isLease} />}
+                    tooltipCloseLabel={t('autobahn:modal.close')}
                   />
                 )}
               </div>
@@ -815,8 +913,16 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
         </div>
 
         {/* REQUEST CTA */}
-        <Button variant="filled" block size="lg" icon="shield-check" style={{ marginTop: 14 }} onClick={onSecure}>
-          {t('autobahn:finance.secureOffer')}
+        <Button
+          variant="filled"
+          block
+          size="lg"
+          icon="shield-check"
+          className={secured ? 'fin-cta-secured' : undefined}
+          style={{ marginTop: 14 }}
+          onClick={onSecure}
+        >
+          {secured && secureLabel ? secureLabel : t('autobahn:finance.secureOffer')}
         </Button>
         {/* phone CTA — touch only (hidden on desktop via .fin-call) */}
         <div className="fin-call">
@@ -848,11 +954,12 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
           <Button
             variant="filled"
             size="lg"
+            className={secured ? 'fin-cta-secured' : undefined}
             style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: 18 }}
             onClick={onSecure}
           >
-            <DocCheckIcon size={23} />
-            {t('autobahn:finance.secureOffer')}
+            {secured ? <Icon name="shield-check" size={18} /> : <DocCheckIcon size={23} />}
+            {secured && secureLabel ? secureLabel : t('autobahn:finance.secureOffer')}
           </Button>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
             <Button variant="outlined" size="lg" icon="phone" style={{ width: 112, height: 50 }} onClick={onCall}>