@bytebrand/fe-ui-core-autobahn 1.0.160 → 1.0.162

package/cards/CarCard.tsx

@@ -157,6 +157,8 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   // active that's already 3, so NEU is dropped rather than causing a 4th to overflow.
   const activeDealChips = [showDrop || showSave, showPct, !!car.zeroDown].filter(Boolean).length;
   const showNeu = asGoodAsNew && car.isNew && activeDealChips < 3;
+  // tabs the price block can switch to (PriceTabs shows Leasing only when the car has a lease rate)
+  const paymentModes: PaymentMode[] = car.lease != null ? ['financing', 'leasing', 'buy'] : ['financing', 'buy'];
   return (
     <article
       className="mcard mcard--interactive cc-card"
@@ -277,18 +279,46 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <div className="cc-price" style={{ marginTop: 0, borderTop: '1px solid var(--md-outline-variant)' }}>
           <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
-            <PriceHero car={car} mode={mode} t={t} alwaysShowUnit />
+            {/* every tab's hero stacked in one grid cell (.cc-hero-stack), only the active one
+                visible, bottom-aligned — Kaufen's struck list price sits on its own line above
+                the price, so without this the row (and the card) grew/shrank by that line on
+                every tab switch. Same trick as .cc-terms-stack below. */}
+            <div className="cc-hero-stack">
+              {paymentModes.map((m) => (
+                <div
+                  key={m}
+                  className={'cc-hero-slot' + (m === mode ? '' : ' cc-hero-slot--hidden')}
+                  aria-hidden={m === mode ? undefined : true}
+                >
+                  <PriceHero car={car} mode={m} t={t} alwaysShowUnit />
+                </div>
+              ))}
+            </div>
             <PriceEvalCol car={car} t={t} />
           </div>
           {/* same fallback CardCtaRow already uses below: pages that haven't wired a real
-              "Rate anpassen" sheet yet still get a working "Details" link (opens the car). */}
-          <PriceTerms
-            car={car}
-            mode={mode}
-            onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
-            onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, mode) : undefined}
-            t={t}
-          />
+              "Rate anpassen" sheet yet still get a working "Details" link (opens the car).
+              Every tab's terms line is rendered into the same grid cell (.cc-terms-stack) and
+              only the active one is visible — the cell is as tall as the tallest line, so the
+              card keeps one height across Finanzierung/Leasing/Kaufen (Leasing's longer line
+              wraps to 2 lines on narrow phones). No change to the visible line itself. */}
+          <div className="cc-terms-stack">
+            {paymentModes.map((m) => (
+              <div
+                key={m}
+                className={'cc-terms-slot' + (m === mode ? '' : ' cc-terms-slot--hidden')}
+                aria-hidden={m === mode ? undefined : true}
+              >
+                <PriceTerms
+                  car={car}
+                  mode={m}
+                  onOpenRateAdjust={onOpenRateAdjust || (() => onOpen(car))}
+                  onShowDetails={onShowFinancingDetails ? () => onShowFinancingDetails(car, m) : undefined}
+                  t={t}
+                />
+              </div>
+            ))}
+          </div>
         </div>
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
             rendered, with real fallbacks the page can override once it wires its own

package/cards/cardParts.tsx

@@ -710,7 +710,12 @@ export const PriceTerms: React.FunctionComponent<{
   onShowDetails?: () => void;
   t: TranslationFunction;
 }> = ({ car, mode, onOpenRateAdjust, onShowDetails, t }) => {
-  if (mode === 'buy') return null;
+  // Kaufen (buy): a cash purchase has no financing terms/details link — used to `return null`
+  // here, which collapsed .cc-terms to 0 height on that tab while Financing/Leasing rendered a
+  // real line, jumping the price row (and everything below it: rating pill, CTA row) up/down on
+  // every tab switch. Render an empty, still-present .cc-terms div instead — same fix as the VDP
+  // FinanceCalculator's .fin-cond (md3.css), which reserves its line's height the same way.
+  if (mode === 'buy') return <div className="cc-terms" />;
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;

package/constants/app.ts

@@ -40,7 +40,17 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = typeof window !== 'undefined' ? localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : 'de';
+// ADV-284: evaluated at import time — with site storage blocked, reading localStorage throws a
+// SecurityError that took down the whole bundle. Blocked storage behaves like "nothing saved".
+const readStoredLang = (): string | null => {
+  try {
+    return localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY);
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = typeof window !== 'undefined' ? readStoredLang() : 'de';
 
 // Default support contact phone
 export const CONTACT_PHONE: string = '+498004030182';

package/constants/core.ts

@@ -35,7 +35,18 @@ export const LOCAL_STORAGE_KEY = {
   i18n_KEY: 'i18nLanguage'
 };
 
-export const DEFAULT_LANG: string = (typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null) ?? 'de';
+// ADV-284: evaluated at import time — with site storage blocked, merely reading
+// window.localStorage throws a SecurityError, which took down the whole bundle (landing
+// page never rendered). Treat blocked storage like "no language saved".
+const readStoredLang = (): string | null => {
+  try {
+    return typeof window !== 'undefined' ? window.localStorage.getItem(LOCAL_STORAGE_KEY.i18n_KEY) : null;
+  } catch (e) {
+    return null;
+  }
+};
+
+export const DEFAULT_LANG: string = readStoredLang() ?? 'de';
 
 export const ROW_STYLES = {
   marginBottom: 10

package/locales/legacy/data.ts

@@ -103,7 +103,8 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         wltpDischargedCombinedLabel: `${getFormattedNumber(vehicleOption.wltpCombined != null ? vehicleOption.wltpCombined : 19.9)}l/100km (entladen, komb)`,
         wltpCo2WtdCombinedShort: `${getFormattedNumber(vehicleOption.wltpCo2)}g CO2/km (gew., komb)*`,
         co2ClassWeighted: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpEnergyEfficiencyClass] || vehicleOption.wltpEnergyEfficiencyClass || ''} (gew., komb)`,
-        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g'] || ''} (entladen, komb)`
+        // ADV-187: no hard-coded fallback class — callers only render this when the class is defined.
+        co2ClassDischarged: `CO2-Klasse ${(cbd.cbd as any)[vehicleOption.wltpDischargedEnergyEfficiencyClass] || vehicleOption.wltpDischargedEnergyEfficiencyClass || ''} (entladen, komb)`
       },
       title: {
         'addOfferToMainSlide': 'Zum Schieberegler hinzufügen',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.160",
+  "version": "1.0.162",
   "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

@@ -10100,7 +10100,8 @@ line-height: 31px;
   z-index: 71;
   background: var(--md-surface);
   border-radius: var(--md-r-xl) var(--md-r-xl) 0 0;
-  max-height: 92vh;
+  /* % of the fixed containing block, not vh/dvh: on iOS vh is the toolbars-collapsed height, and Chrome on iOS does not shrink dvh while its toolbars are shown either, so a 92vh/92dvh bottom sheet grew under the address bar and hid its own header (title, download, close). The fixed box itself always matches the visible area. */
+  max-height: 92%;
   display: flex;
   flex-direction: column;
   box-shadow: 0 -8px 30px rgba(16, 22, 42, 0.22);
@@ -14151,7 +14152,8 @@ color: #005CFF;
   flex-direction: column;
   width: 100%;
   max-width: 560px;
-  max-height: calc(100vh - 32px);
+  /* % of the scrim (fixed, inset 0, 16px padding) instead of calc(100vh - 32px): see the iOS note on the mobile .mmodal below */
+  max-height: 100%;
   background: var(--md-sc-lowest, #fff);
   color: var(--md-on-surface);
   border-radius: var(--md-r-lg);
@@ -14297,7 +14299,8 @@ color: #005CFF;
   }
   .md3 .mmodal {
     max-width: 100%;
-    max-height: 92vh;
+    /* % of the fixed containing block, not vh/dvh: on iOS vh is the toolbars-collapsed height, and Chrome on iOS does not shrink dvh while its toolbars are shown either, so a 92vh/92dvh bottom sheet grew under the address bar and hid its own header (title, download, close). The fixed box itself always matches the visible area. */
+    max-height: 92%;
     border-radius: var(--md-r-lg) var(--md-r-lg) 0 0;
     border-bottom: 0;
     animation: mmodal-sheet-up 0.25s ease-out;

package/vehiclesProps/decoratedLightProps.tsx

@@ -165,7 +165,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -174,14 +177,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 
@@ -316,7 +321,10 @@ const getDecoratedLightProps = (
         if (hybridPlugin) {
           if (wltpWeightedPowerCombinedContent && wltpWeightedCombinedContent) {
             const dischargedCombined = Number.isFinite(wltpConsumptionCombined) ? wltpConsumptionCombined : 19.9;
-            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || 'selector_energyEfficiencyClass_g';
+            // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+            // backend could not derive it the field is selector_unknown — hide the segment, never
+            // fall back to a hard-coded class here.
+            const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
             const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
             const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
             const co2WeightedContent = Number.isFinite(wltpCo2)
@@ -325,14 +333,16 @@ const getDecoratedLightProps = (
             const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
               ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
               : null;
-            const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+            const co2ClassDischarged = isPropDefined(dischargedClass)
+              ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+              : null;
             return <React.Fragment>
                 {`${wltpWeightedPowerCombinedContent} + `}
                 {`${weightedCombinedLabeled}, `}
                 {`${dischargedCombinedLabeled}`}
                 {co2WeightedContent && <>, {co2WeightedContent}</>}
                 {co2ClassWeighted && <>, {co2ClassWeighted}</>}
-                {<>, {co2ClassDischarged}</>}
+                {co2ClassDischarged && <>, {co2ClassDischarged}</>}
               </React.Fragment>
           }
 

package/vehiclesProps/decoratedProps.tsx

@@ -880,10 +880,12 @@ const getDecoratedProps = (
         // (entladen, komb) fuel consumption + a discharged CO2 class.
         if (hybridPlugin && wltpConsumptionWeightedPowerCombinedContent && wltpConsumptionWeightedCombinedContent) {
           const ADV88_DEFAULT_DISCHARGED_COMBINED = 19.9;
-          const ADV88_DEFAULT_DISCHARGED_CO2_CLASS = 'selector_energyEfficiencyClass_g';
 
           const dischargedCombined = Number.isFinite(wltpCombined) ? wltpCombined : ADV88_DEFAULT_DISCHARGED_COMBINED;
-          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass || ADV88_DEFAULT_DISCHARGED_CO2_CLASS;
+          // ADV-187: the discharged class is derived server-side from wltpCo2Discharged; when the
+          // backend could not derive it the field is selector_unknown — hide the segment, never
+          // fall back to a hard-coded class here.
+          const dischargedClass = car.environmentEmissions.wltpDischargedEnergyEfficiencyClass;
 
           const weightedCombinedLabeled = t('vehicleProps:value.wltpWeightedCombinedLabel', { consumption: wltpWeightedCombined.toLocaleString(language), unit: translatedUnit });
           const dischargedCombinedLabeled = t('vehicleProps:value.wltpDischargedCombinedLabel', { consumption: dischargedCombined.toLocaleString(language), unit: translatedUnit });
@@ -893,7 +895,9 @@ const getDecoratedProps = (
           const co2ClassWeighted = isPropDefined(wltpEnergyEfficiencyClass)
             ? t('vehicleProps:value.co2ClassWeighted', { class: t(`cbd:${wltpEnergyEfficiencyClass}`) })
             : null;
-          const co2ClassDischarged = t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) });
+          const co2ClassDischarged = isPropDefined(dischargedClass)
+            ? t('vehicleProps:value.co2ClassDischarged', { class: t(`cbd:${dischargedClass}`) })
+            : null;
 
           return <React.Fragment>
             {wrapValue(wltpConsumptionWeightedPowerCombinedContent)}{' + '}
@@ -901,7 +905,7 @@ const getDecoratedProps = (
             {wrapValue(dischargedCombinedLabeled)}
             {co2WeightedContent && <>{', '}{wrapValue(co2WeightedContent)}</>}
             {co2ClassWeighted && <>{', '}{co2ClassWeighted}</>}
-            {', '}{co2ClassDischarged}
+            {co2ClassDischarged && <>{', '}{co2ClassDischarged}</>}
           </React.Fragment>
         }