@bytebrand/fe-ui-core-autobahn 1.0.10 → 1.0.12

package/cards/cardParts.tsx

@@ -422,6 +422,12 @@ const PpRow: React.FunctionComponent<PpRowProps> = ({ label, value, unit, old, f
  */
 export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t }) => {
   const hasLease = car.lease != null;
+  // Terms of the config the displayed rate was actually computed with (per-car:
+  // dealer rate + the user's saved localStorage adjustments) — default config
+  // terms only when the car doesn't carry its own.
+  const finFirstInstallment =
+    car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
+  const finMonths = car.finMonths ?? _finMonths;
   return (
     <div className="pricepaths">
       <div className="pp-hero">
@@ -432,9 +438,9 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t })
         </div>
         <div className="pp-hero-terms">
           {t('autobahn:card.price.financeTerms', {
-            firstInstallment: _finFirstInstallment,
-            months: _finMonths,
-            count: _finMonths,
+            firstInstallment: finFirstInstallment,
+            months: finMonths,
+            count: finMonths,
           })}
         </div>
       </div>

package/cards/types.ts

@@ -57,6 +57,13 @@ export interface AutobahnCar {
   // --- price (always real) ---
   /** financing monthly rate in EUR — the LEAD price on every card. */
   monthly: number;
+  /**
+   * financing terms the `monthly` rate was computed with — the per-car merged
+   * config (dealer rate + the user's saved localStorage adjustments, ADV-157).
+   * Absent → the card falls back to the fe-financing default-config terms.
+   */
+  finFirstInstallment?: number;
+  finMonths?: number;
   /** purchase price in EUR (raw number; formatted de-DE by the cards). */
   price: number;
 

package/compat/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -23,6 +23,7 @@ import styles from './VehicleDetailedSlider.styl';
 
 interface IProps {
   t: (phrase: string, config?: any) => string;
+  carId?: string;
   price: IPrice;
   photos: IImage[];
   exteriorPhotos: IImage[];
@@ -300,6 +301,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
   render() {
     const {
       t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase),
+      carId,
       price,
       photos,
       exteriorPhotos,
@@ -338,6 +340,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
+      carId,
       financingConfig,
       showNewLabel,
       showDownPayment,

package/compat/VehicleDetailedSlider/partials/PriceData.tsx

@@ -6,6 +6,7 @@ import styles from './PriceData.styl';
 
 interface IProps {
   t: (phrase: string, config?: any) => string;
+  carId?: string;
   showNewLabel: boolean;
   historyPriceDifference: number;
   historyPriceDifferencePerCent: number;
@@ -19,16 +20,19 @@ const MIN_PERCENT = 5;
 const MIN_PRICE_DIFFERENCE = 500;
 const EUR = `\u20AC`;
 
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
+const PriceData: React.FunctionComponent<IProps> = ({ t, carId, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
   const [lsFinancingFirst, setLsFinancingFirst] = React.useState<number | undefined>(undefined);
   const [lsLeasingFirst, setLsLeasingFirst] = React.useState<number | undefined>(undefined);
 
   React.useEffect(() => {
+    // Per-car: only the user's own adjustments for THIS car (financing_store →
+    // userCarAdjustments[carId]) affect its 0-€-Anzahlung badge.
     const readFromStorage = () => {
       const raw = localStorage.getItem('financing_store');
       const parsed = raw ? JSON.parse(raw) : null;
-      const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
-      const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
+      const carAdjustments = carId ? parsed?.userCarAdjustments?.[carId] : null;
+      const fin = carAdjustments?.financing?.firstInstallment;
+      const lea = carAdjustments?.leasing?.firstInstallment;
       setLsFinancingFirst(fin);
       setLsLeasingFirst(lea);
     };
@@ -36,7 +40,7 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNe
     readFromStorage();
     window.addEventListener('storage', readFromStorage);
     return () => window.removeEventListener('storage', readFromStorage);
-  }, []);
+  }, [carId]);
 
   const rawFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
   const firstInstallment = rawFirstInstallment ?? 0;

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -294,6 +294,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
 
   const statsProps = {
     t,
+    id,
     price,
     showNewLabel,
     showDownPayment: !!(offer as any)?.showDownPayment,

package/compat/withStats/withStats.tsx

@@ -77,10 +77,15 @@ const withStats = (WrappedComponent: any) => ({
   const [anyLsBlocked, setAnyLsBlocked] = React.useState(false);
 
   React.useEffect(() => {
+    // Per-car: only the user's own adjustments for THIS car (financing_store →
+    // userCarAdjustments[id]) affect its 0-€-Anzahlung badge; adjustments made
+    // on other cars are ignored.
+    const carId = props.id;
     const raw = localStorage.getItem('financing_store');
     const parsed = raw ? JSON.parse(raw) : null;
-    const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
-    const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
+    const carAdjustments = carId ? parsed?.userCarAdjustments?.[carId] : null;
+    const fin = carAdjustments?.financing?.firstInstallment;
+    const lea = carAdjustments?.leasing?.firstInstallment;
     const finBlocked = fin !== undefined && fin !== null && fin !== 0;
     const leaBlocked = lea !== undefined && lea !== null && lea !== 0;
     const anyBlocked = finBlocked || leaBlocked;

package/data/toAutobahnCar.ts

@@ -305,6 +305,11 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   // (getFinancing.ts:82 `monthlyInstallment`), spread into price.financing by
   // transformDataForVehicles (DataTransformers.ts:345). It is the LEAD price.
   const monthly = num(price?.financing?.monthlyInstallment) ?? 0;
+  // financing terms the monthly rate was computed with — same merged per-car
+  // config (dealer rate + the user's saved localStorage adjustments, ADV-157).
+  // Emitted only when real; the cards fall back to the default-config terms.
+  const finFirstInstallment = num(price?.financing?.firstInstallment);
+  const finMonths = num(price?.financing?.rawPaybackPeriod) ?? num(price?.financing?.paybackPeriod);
   // price ← price.currentSalesPrice (DataTransformers.ts:352).
   const purchase = num(price?.currentSalesPrice) ?? 0;
 
@@ -410,6 +415,8 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
 
     // price
     monthly,
+    ...(finFirstInstallment != null ? { finFirstInstallment } : {}),
+    ...(finMonths != null ? { finMonths } : {}),
     price: purchase,
 
     // media

package/package.json

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