@bytebrand/fe-ui-core-autobahn 1.0.97 → 1.0.99

package/cards/cardParts.tsx

@@ -939,6 +939,8 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;
+  const leasFirstInstallment =
+    car.leaseFirstInstallment != null ? car.leaseFirstInstallment.toLocaleString('de-DE') : _leasFirstInstallment;
   const leasMileage = car.leaseMileage ?? _leasMileage;
   const leasMonths = car.leaseMonths ?? _leasPeriod;
   const hasLeasTerms = Boolean(leasMileage && leasMonths);
@@ -979,14 +981,17 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           <PpRow label={t('autobahn:card.price.leasing')} value={car.lease as number} unit="mtl." />
           {hasLeasTerms && (
             <div className="pp-sub-terms">
-              {/* mockup drops the Sonderzahlung figure entirely here (unlike the shared
-                  leaseTerms key mobile/VDP use) and swaps the order to mileage-first —
-                  a dedicated key, not a rework of leaseTerms, so those other callers
-                  keep their own reviewed wording untouched. */}
-              {t('autobahn:card.price.leaseTermsCompact', {
-                months: leasMonths,
+              {/* dedicated keys (not a rework of leaseTerms) so mobile/VDP's own reviewed
+                  wording there stays untouched, but includes the same Sonderzahlung figure.
+                  Split across two lines with an explicit <br/> (column is too narrow for all
+                  three figures + Details on one line) — forced right after km/Jahr so "36" and
+                  "Mon." always land on the same line instead of an awkward mid-number wrap. */}
+              {t('autobahn:card.price.leaseTermsCompactLine1', {
+                firstInstallment: leasFirstInstallment,
                 mileage: leasMileageStr,
-              })}{' '}
+              })}{' · '}
+              <br />
+              {t('autobahn:card.price.leaseTermsCompactLine2', { months: leasMonths })}{' '}
               · {detailsLink('leasing')}
             </div>
           )}

package/locales/de/autobahn.json

@@ -12,7 +12,8 @@
       "financeTerms": "{{firstInstallment}} € Anzahlung · {{months}} Monate",
       "financeTerms_plural": "{{firstInstallment}} € Anzahlung · {{months}} Monate",
       "leaseTerms": "{{firstInstallment}} € Sonderzahlung · {{months}} Mon. · {{mileage}} km/Jahr",
-      "leaseTermsCompact": "{{mileage}} km/Jahr · {{months}} Monate",
+      "leaseTermsCompactLine1": "{{firstInstallment}} € Sonderzahlung · {{mileage}} km/Jahr",
+      "leaseTermsCompactLine2": "{{months}} Mon.",
       "detailsLink": "Details",
       "uvpRateLabel": "UVP-Rate",
       "uvpRateTooltipBody": "Rechnerische Vergleichsrate auf Basis der unverbindlichen Preisempfehlung des Herstellers und mit denselben Finanzierungsparametern wie das Angebot. Keine früher verlangte Rate. Das Rundum-Sorglos-Paket wird einmalig separat berechnet.",

package/locales/en/autobahn.json

@@ -12,7 +12,8 @@
       "financeTerms": "€{{firstInstallment}} down payment · {{months}} months",
       "financeTerms_plural": "€{{firstInstallment}} down payment · {{months}} months term",
       "leaseTerms": "€{{firstInstallment}} down payment · {{months}} mo. · {{mileage}} km/year",
-      "leaseTermsCompact": "{{mileage}} km/year · {{months}} months",
+      "leaseTermsCompactLine1": "€{{firstInstallment}} down payment · {{mileage}} km/year",
+      "leaseTermsCompactLine2": "{{months}} mo.",
       "detailsLink": "Details",
       "uvpRateLabel": "UVP rate",
       "uvpRateTooltipBody": "Calculated comparison rate based on the manufacturer's non-binding price recommendation, using the same financing parameters as the offer. Not a previously requested rate. The all-inclusive package is billed separately, as a one-off.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -5844,9 +5844,10 @@ line-height: 31px;
 .md3 .vdp-bottom-bar {
   position: fixed;
   left: 0;
+  right: 0;
   bottom: 0;
   z-index: 60;
-  width: 390px;
+  width: auto;
   height: 196px;
   background: rgba(244, 243, 243, 0.95);
   border: 1px solid #D4DDE7;
@@ -8637,7 +8638,9 @@ color: #005CFF;
     font-size: 13px;
     line-height: 15px;
     color: #111820;
+    margin: 0px 0px;
     margin-bottom: 12px;
+    vertical-align: -3px;
   }
   /* "Finanzierungsdetails"/"Leasing-Details" reads as a link here (unlike CarCard's quiet
      .cc-terms-link, which stays text-colored on purpose) — underlined. */
@@ -8657,11 +8660,11 @@ color: #005CFF;
     font-weight: 700 !important;
     color: var(--md-on-surface-variant) !important;
   }
-  /* figma pricing-card padding is 16 (inline says 20 — hence !important); the side-by-side
+  /* figma pricing-card padding is 15px 12px (inline says 20 — hence !important); the side-by-side
      CTAs must be allowed to SHRINK (mbtn is nowrap min-width:auto, 0-30px padding — the pair
      alone mins out wider than the phone card) */
   .md3 .vdp-aside > .mcard {
-    padding: 16px !important;
+    padding: 15px 12px !important;
   }
   .md3 .fin-cta-row .mbtn {
     min-width: 0;

package/utils/financeFormat.ts

@@ -19,6 +19,13 @@ export function formatPct(n: number): string {
   return `${n.toFixed(2).replace('.', ',')} %`;
 }
 
+/** Monetary figure → de-DE grouped string with fixed cents (e.g. 44333 → "44.333,00",
+ *  42243.9 → "42.243,90"). Unlike formatEur, always shows exactly 2 decimals — for the "Repräsentatives
+ *  Beispiel" breakdown table (FinanceDetailsModal), where every € line is expected to carry cents. */
+export function formatEurCents(n: number): string {
+  return n.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
 export interface FinanceExampleFields {
   price: number;
   apr: number;

package/vdp/VdpModules.tsx

@@ -28,7 +28,7 @@ import { Button, Dropdown, DropdownOption, Icon, Spec, StatChip, Stars } from '.
 import { CO2_CLASSES, CO2_COLORS, TIER_LABELS, TIER_KEYS, TIER_COLORS, TIER_BACKGROUNDS } from '../constants';
 import { defaultVdpSpecs, EquipmentGroups, PriceRatingBands, VehicleDetail, VdpSpec, VdpReview } from './types';
 import { AddServicesTooltipBody, CalcRow, DocCheckIcon, EvalBar, expanderBtnStyle, FinanceMode, Slider, TermChips, ToggleRow } from './FinanceCalculator';
-import { formatEur as eur, formatPct as pct } from '../utils/financeFormat';
+import { formatEur as eur, formatEurCents as eurCents, formatPct as pct } from '../utils/financeFormat';
 
 /** Figma "check with open arc" glyph (modern lucide circle-check-big; the bundled lucide
  *  0.288 only ships the closed-circle variant, so the two paths are inlined). */
@@ -2082,51 +2082,51 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
     const subtotalWithPackage = ratesSum != null ? ratesSum + down + (hasAddServicesRow ? addServicesRowValue : 0) : undefined;
     const grandTotal = subtotalWithPackage != null ? subtotalWithPackage + residual : undefined;
     rows = [
-      [t('autobahn:modal.leaseVehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.leaseVehiclePrice'), `${eurCents(price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
       ...(annualMileage != null ? ([[t('autobahn:modal.annualMileage'), `${eur(annualMileage)} km`]] as Array<[string, string]>) : []),
-      [t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`],
-      [t('autobahn:modal.leasingRateCount', { count: term }), `${eur(monthly)} €`],
-      [t('autobahn:modal.finalPaymentDue'), `${eur(0)} €`],
-      ...(residual > 0 ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.leaseDownPayment'), `${eurCents(down)} €`],
+      [t('autobahn:modal.leasingRateCount', { count: term }), `${eurCents(monthly)} €`],
+      [t('autobahn:modal.finalPaymentDue'), `${eurCents(0)} €`],
+      ...(residual > 0 ? ([[t('autobahn:modal.residualValue'), `${eurCents(residual)} €`]] as Array<[string, string]>) : []),
       ...(ratesSum != null
-        ? ([[t('autobahn:modal.rateSumLabel', { term, amount: eur(monthly) }), `${eur(ratesSum)} €`, true]] as Array<[string, string, boolean]>)
+        ? ([[t('autobahn:modal.rateSumLabel', { term, amount: eurCents(monthly) }), `${eurCents(ratesSum)} €`, true]] as Array<[string, string, boolean]>)
         : []),
-      ...(ratesSum != null ? ([[t('autobahn:modal.leaseDownPayment'), `${eur(down)} €`]] as Array<[string, string]>) : []),
+      ...(ratesSum != null ? ([[t('autobahn:modal.leaseDownPayment'), `${eurCents(down)} €`]] as Array<[string, string]>) : []),
       ...(ratesSum != null && hasAddServicesRow
-        ? ([[t('autobahn:modal.addServicesRowLease'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        ? ([[t('autobahn:modal.addServicesRowLease'), `${eurCents(addServicesRowValue)} €`]] as Array<[string, string]>)
         : []),
       ...(subtotalWithPackage != null
-        ? ([[hasAddServicesRow ? t('autobahn:modal.subtotalWithPackage') : t('autobahn:modal.subtotalNoPackage'), `${eur(subtotalWithPackage)} €`, true]] as Array<
+        ? ([[hasAddServicesRow ? t('autobahn:modal.subtotalWithPackage') : t('autobahn:modal.subtotalNoPackage'), `${eurCents(subtotalWithPackage)} €`, true]] as Array<
             [string, string, boolean]
           >)
         : []),
-      ...(residual > 0 && grandTotal != null ? ([[t('autobahn:modal.residualValue'), `${eur(residual)} €`]] as Array<[string, string]>) : []),
+      ...(residual > 0 && grandTotal != null ? ([[t('autobahn:modal.residualValue'), `${eurCents(residual)} €`]] as Array<[string, string]>) : []),
       ...(grandTotal != null
-        ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eur(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
+        ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eurCents(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
     ];
   } else {
     rows = [
-      [t('autobahn:modal.vehiclePrice'), `${eur(price)} €`],
+      [t('autobahn:modal.vehiclePrice'), `${eurCents(price)} €`],
       [t('autobahn:modal.term'), t('autobahn:modal.months', { months: term, count: term })],
-      [t('autobahn:modal.downPayment'), `${eur(down)} €`],
-      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eur(monthly)} €`],
-      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eur(finalInstallment)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.downPayment'), `${eurCents(down)} €`],
+      [t('autobahn:modal.monthlyRateCount', { count: term }), `${eurCents(monthly)} €`],
+      ...(finalInstallment != null && finalInstallment > 0 ? ([[t('autobahn:modal.finalInstallment'), `${eurCents(finalInstallment)} €`]] as Array<[string, string]>) : []),
       ...(hasAddServicesRow
-        ? ([[t('autobahn:modal.addServicesRow'), `${eur(addServicesRowValue)} €`]] as Array<[string, string]>)
+        ? ([[t('autobahn:modal.addServicesRow'), `${eurCents(addServicesRowValue)} €`]] as Array<[string, string]>)
         : []),
       ...(nominalRate != null && nominalRate > 0 ? ([[t('autobahn:modal.nominalRate'), pct(nominalRate)]] as Array<[string, string]>) : []),
       [t('autobahn:modal.effectiveRate'), pct(apr)],
-      [t('autobahn:modal.netLoanAmount'), `${eur(netto)} €`],
-      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eur(grossAmount)} €`]] as Array<[string, string]>) : []),
+      [t('autobahn:modal.netLoanAmount'), `${eurCents(netto)} €`],
+      ...(grossAmount != null && grossAmount > 0 ? ([[t('autobahn:modal.totalRepayment'), `${eurCents(grossAmount)} €`]] as Array<[string, string]>) : []),
       ...(totalCost != null
-        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eur(totalCost)} €`, true]] as Array<
+        ? ([[hasAddServices ? t('autobahn:modal.totalCostWithPackage') : t('autobahn:modal.totalCost'), `${eurCents(totalCost)} €`, true]] as Array<
             [string, string, boolean]
           >)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eur(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
     ];
   }
   const breakdownRows = rows.map(([l, v, bold], i) => (