@bytebrand/fe-ui-core-autobahn 1.0.0

package/vdp/VdpViewer.tsx

@@ -0,0 +1,139 @@
+// Autobahn (auto.de redesign) — fullscreen gallery viewer ("full image view").
+//
+// Typed React 18 + TS port of `VdpViewer` from the design kit
+// (docs/redesign/design-source/ui_kits/website/ScreenVDP.jsx). Light stage for the
+// white studio photos: keyboard (←/→/Esc) + swipe nav, a thumbnail strip, and it
+// locks page scroll while open.
+//
+// Pure / presentational: images arrive ALREADY RESOLVED (the design kit's
+// `assetUrl(...)` lookup is the caller's job, matching CardCarousel) and the only
+// inputs are props + callbacks. The keyboard / scroll-lock effect touches the
+// document the way any focus-trapping modal must — there is no store / API /
+// data access. Renders correctly only inside a `<div className="md3">` subtree.
+
+import React, { useEffect, useRef, useState } from 'react';
+import { TranslationFunction } from '../types';
+
+import { Icon, IconButton } from '../ui';
+
+export interface VdpViewerProps {
+  /** ready-to-use image URLs (already resolved by the caller). */
+  images: string[];
+  /** index to open on. */
+  start?: number;
+  /** fired when the viewer should close (Esc / close button). */
+  onClose: () => void;
+  /** i18n function (drilled from the page). */
+  t: TranslationFunction;
+}
+
+const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t }) => {
+  const [i, setI] = useState(start);
+  const n = images.length;
+  const go = (d: number) => setI((p) => (p + d + n) % n);
+
+  // Keyboard nav + scroll lock while the overlay is mounted. `go`/`onClose` are
+  // read from refs so the listener stays stable for the lifetime of the viewer.
+  const goRef = useRef(go);
+  goRef.current = go;
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeRef.current();
+      if (e.key === 'ArrowRight') goRef.current(1);
+      if (e.key === 'ArrowLeft') goRef.current(-1);
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  const tx = useRef<number | null>(null);
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 200,
+        background: 'var(--md-surface)',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+      onTouchStart={(e) => {
+        tx.current = e.touches[0].clientX;
+      }}
+      onTouchEnd={(e) => {
+        if (tx.current == null) return;
+        const dx = e.changedTouches[0].clientX - tx.current;
+        tx.current = null;
+        if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '12px 16px',
+          borderBottom: '1px solid var(--md-outline-variant)',
+        }}
+      >
+        <span className="num md-title-sm">
+          {i + 1} / {n}
+        </span>
+        <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
+      </div>
+      <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff' }}>
+        <img
+          src={images[i]}
+          alt=""
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }}
+        />
+        <button
+          className="car-arrow car-arrow--l hide-mobile"
+          style={{ opacity: 1 }}
+          aria-label={t('autobahn:viewer.previousLabel')}
+          onClick={() => go(-1)}
+        >
+          <Icon name="chevron-left" size={22} />
+        </button>
+        <button
+          className="car-arrow car-arrow--r hide-mobile"
+          style={{ opacity: 1 }}
+          aria-label={t('autobahn:viewer.nextLabel')}
+          onClick={() => go(1)}
+        >
+          <Icon name="chevron-right" size={22} />
+        </button>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 16px', flexWrap: 'wrap' }}>
+        {images.map((src, k) => (
+          <button
+            key={k}
+            onClick={() => setI(k)}
+            aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+            style={{
+              width: 64,
+              height: 44,
+              padding: 0,
+              borderRadius: 'var(--md-r-sm)',
+              overflow: 'hidden',
+              cursor: 'pointer',
+              border: k === i ? '2px solid var(--md-primary)' : '1px solid var(--md-outline-variant)',
+              background: '#fff',
+            }}
+          >
+            <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default VdpViewer;

package/vdp/index.ts

@@ -0,0 +1,75 @@
+// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) modules barrel.
+//
+// ES named exports replacing the design kit's `Object.assign(window, {...})`
+// (docs/redesign/design-source/ui_kits/website/CdpModules.jsx + ScreenVDP.jsx).
+// These are the PRESENTATIONAL VDP modules (W3a); the page wiring that feeds them
+// from the real stores is a separate later step (W3b). Consumers import everything
+// from '../vdp'.
+
+// Fullscreen gallery viewer.
+export { default as VdpViewer } from './VdpViewer';
+export type { VdpViewerProps } from './VdpViewer';
+
+// Finance calculator (controlled / presentational — no annuity) + its helpers.
+export { default as FinanceCalculator, Slider, CalcRow, TermChips } from './FinanceCalculator';
+export type {
+  FinanceCalculatorProps,
+  FinanceMode,
+  SliderProps,
+  CalcRowProps,
+  TermChipsProps,
+} from './FinanceCalculator';
+
+// Remaining presentational modules.
+export {
+  VdpHeaderCard,
+  VdpSpecTable,
+  EquipmentList,
+  Co2Label,
+  VehicleDescription,
+  TrustStrip,
+  PriceHistory,
+  ProtectionProducts,
+  VdpAnchors,
+  VdpStickyBar,
+  VdpBottomBar,
+  InspectionBlock,
+  HowItWorks,
+  CustomerRatings,
+  VdpEnquiry,
+  FinanceDetailsModal,
+} from './VdpModules';
+export type {
+  VdpHeaderCardProps,
+  VdpSpecTableProps,
+  EquipmentListProps,
+  Co2LabelProps,
+  VehicleDescriptionProps,
+  TrustStripProps,
+  TrustItem,
+  PriceHistoryProps,
+  ProtectionProductsProps,
+  ProtectionProduct,
+  VdpAnchorsProps,
+  VdpAnchor,
+  VdpStickyBarProps,
+  VdpBottomBarProps,
+  InspectionBlockProps,
+  HowItWorksProps,
+  HowItWorksStep,
+  CustomerRatingsProps,
+  VdpEnquiryProps,
+  FinanceDetailsModalProps,
+} from './VdpModules';
+
+// View-model types + the spec-table helper.
+export { defaultVdpSpecs } from './types';
+export type {
+  VehicleDetail,
+  VehicleCondition,
+  VdpSpec,
+  EquipmentGroups,
+  PriceHistoryPoint,
+  VdpReview,
+  AutobahnPhev,
+} from './types';

package/vdp/types.ts

@@ -0,0 +1,197 @@
+// Autobahn (auto.de redesign) — Vehicle-Detail (VDP) view-model types.
+//
+// Typed contracts for the ported VDP presentational modules (W3a). These are the
+// props the pure components consume; the page wiring that builds a VehicleDetail
+// from the real stores/API is a SEPARATE later step (W3b). Nothing here touches a
+// store, the API or `window`.
+//
+// IMPORTANT — needs-data discipline (the point of the ticket):
+// REQUIRED fields always carry real data from the listing source. The OPTIONAL
+// (`?`) fields are ones we have NO real source for yet; they are optional ON
+// PURPOSE so the components can detect their absence and render the
+// NEEDS_DATA_LABEL ('Daten folgt') marker instead of a fabricated value. Never
+// default these to placeholder numbers. priceHistory + the market band
+// (marketLow / marketAvg / marketHigh) are needs-data by default.
+
+import type { AutobahnPhev } from '../cards/types';
+
+export type { AutobahnPhev };
+
+/** One row of the Fahrzeugdaten spec table: [kebab-case lucide icon, label, value]. */
+export type VdpSpec = readonly [icon: string, label: string, value: string];
+
+/**
+ * Grouped equipment: each entry is a section title mapped to its item labels,
+ * e.g. { Komfort: ['Klimaautomatik', …], Sicherheit: [...] }. Replaces the design
+ * kit's `equipFor(id)` lookup — the page passes the real grouped equipment in.
+ */
+export type EquipmentGroups = Record<string, string[]>;
+
+/** Vehicle condition block rendered as the header card's zustand tiles. */
+export interface VehicleCondition {
+  /** TÜV/HU validity, e.g. '03/2027' — or 'Neu' for a new HU. */
+  hu: string;
+  /** accident-free flag (Unfallfrei). */
+  unfallfrei: boolean;
+  /** full service history (Scheckheftgepflegt). */
+  scheckheft: boolean;
+  /** warranty label, e.g. '1 Jahr inkl.'. */
+  garantie: string;
+}
+
+/**
+ * One customer review (auto.de Google reviews). REAL data — loaded by the page
+ * from the same WordPress quotes source the legacy VDP uses
+ * (CustomerQuotes / json-quotes.json). Never fabricated; when no reviews load the
+ * CustomerRatings section is not rendered.
+ */
+export interface VdpReview {
+  /** stable id. */
+  id: string;
+  /** reviewer display name. */
+  name: string;
+  /** avatar image URL ('' when none). */
+  image: string;
+  /** the review text. */
+  review: string;
+  /** star rating 1–5. */
+  rating: number;
+}
+
+/** One point on the price-history sparkline. */
+export interface PriceHistoryPoint {
+  /** x-axis label, e.g. 'vor 6 Wo.' / 'heute'. */
+  label: string;
+  /** price in EUR at that point. */
+  price: number;
+}
+
+/**
+ * View-model for a single vehicle as rendered by the Autobahn VDP modules.
+ *
+ * REQUIRED fields are always populated with real data. OPTIONAL (`?`) fields have
+ * no real data source yet — when absent the components render the 'Daten folgt'
+ * marker rather than inventing a value.
+ */
+export interface VehicleDetail {
+  // --- identity / headline (always real) ---
+  make: string;
+  model: string;
+  trim: string;
+  /** auto.de-ID reference code (metaData.vehicleId) — quoted by customers/agents on the hotline. */
+  autoDeId?: string;
+
+  // --- key specs (always real) ---
+  /** mileage in km (raw number; formatted de-DE by the components). */
+  km: number;
+  /** first registration, e.g. '03/2021'. */
+  reg: string;
+  /** power label, e.g. '110 kW (150 PS)'. */
+  power: string;
+  /** fuel label, e.g. 'Benzin' / 'Plug-in-Hybrid'. */
+  fuel: string;
+  /** gearbox label, e.g. 'Automatik' / 'Schaltgetriebe'. */
+  gear: string;
+  /** number of previous owners (rendered as 'N. Hand'). */
+  owners: number;
+  /** number of seats. */
+  seats: number;
+  /** number of doors. */
+  doors: number;
+  /** exterior color label, e.g. 'Mythosschwarz Metallic'. */
+  color: string;
+  /** body style label, e.g. 'Limousine'. */
+  body: string;
+
+  // --- full spec table (always real) ---
+  /**
+   * The complete Fahrzeugdaten rows. Optional: when omitted the spec table is
+   * derived from the fields above via `defaultVdpSpecs(vehicle)`, matching the
+   * design's twelve-row layout. Pass an explicit list to control order/contents.
+   */
+  specs?: VdpSpec[];
+
+  // --- price (always real) ---
+  /** financing monthly rate in EUR — the lead price shown in sticky/bottom bars. */
+  monthly: number;
+  /** purchase price in EUR (raw number; formatted de-DE by the components). */
+  price: number;
+
+  // --- media (always real) ---
+  /** ready-to-use image URLs for the gallery + viewer. */
+  gallery: string[];
+  /** total photo count for the image-count badge. */
+  photos: number;
+
+  // --- legally-required Pkw-EnVKV consumption line (always real) ---
+  /** combined fuel consumption label, e.g. '5,4 l/100 km'. */
+  cons: string;
+  /** combined CO₂ emissions label, e.g. '124 g/km'. */
+  co2: string;
+  /** CO₂ efficiency class letter, e.g. 'B'. */
+  co2class: string;
+  /** present only for plug-in hybrids — drives the dual-figure EnVKV block. */
+  phev?: AutobahnPhev;
+
+  // --- equipment + condition + trust (always real) ---
+  /** grouped equipment for the searchable Ausstattung list. */
+  equipment: EquipmentGroups;
+  /** hand-picked highlight chips (first few shown in the header accent row). */
+  highlights: string[];
+  /** condition block driving the header card's zustand tiles. */
+  condition: VehicleCondition;
+  /** 130-Punkte-Check pass categories (all pass — auto.de promise). */
+  inspection: string[];
+
+  // --- price rating (always real) ---
+  /** price rating tone: 'fair' → warn pill, anything else → good pill. */
+  rating: string;
+  /** price rating label shown in the pill, e.g. 'Guter Preis'. */
+  ratingLabel: string;
+
+  // --- deal badges (derived from car.showNewLabel / price.* / offer.*) ---
+  /** NEU badge — car was recently listed (showNewLabel flag). */
+  isNew?: boolean;
+  /** price-drop amount in EUR (≥ 500 € threshold); omit when absent/below threshold. */
+  drop?: number;
+  /** percent price-drop (rounded integer); omit when absent or no drop. */
+  dropPct?: number;
+  /** 0 € Anzahlung badge (offer.showDownPayment flag). */
+  zeroDown?: boolean;
+
+  // --- NEEDS DATA: no real source yet (NEVER fabricate) ---
+  /** original list price (for the struck-through reference + history endpoint). */
+  listPrice?: number;
+  /** price-history points (sparkline). Needs-data by default. */
+  priceHistory?: PriceHistoryPoint[];
+  /** lowest comparable market price in EUR (market band lower bound). */
+  marketLow?: number;
+  /** average comparable market price in EUR (market band reference). */
+  marketAvg?: number;
+  /** highest comparable market price in EUR (market band upper bound). */
+  marketHigh?: number;
+  /** number of buyers currently watching this car. */
+  watchers?: number;
+}
+
+/**
+ * Build the design's twelve-row Fahrzeugdaten table from the typed fields. Used
+ * when a VehicleDetail carries no explicit `specs`. Pure — produces the same rows
+ * and order as the spec's ScreenVDP `specs` array.
+ */
+export function defaultVdpSpecs(v: VehicleDetail): VdpSpec[] {
+  return [
+    ['gauge', 'Kilometerstand', `${v.km.toLocaleString('de-DE')} km`],
+    ['calendar', 'Erstzulassung', v.reg],
+    ['zap', 'Leistung', v.power],
+    ['fuel', 'Kraftstoff', v.fuel],
+    ['cog', 'Getriebe', v.gear],
+    ['users', 'Sitze', `${v.seats} Sitze`],
+    ['door-open', 'Türen', `${v.doors} Türen`],
+    ['user', 'Halter', `${v.owners}. Hand`],
+    ['palette', 'Außenfarbe', v.color],
+    ['car-front', 'Karosserie', v.body],
+    ['droplet', 'Verbrauch komb.', v.cons],
+    ['leaf', 'CO₂ · Klasse', `${v.co2} · ${v.co2class}`],
+  ];
+}

package/vehiclesProps/cbdSelectors.ts

@@ -0,0 +1,117 @@
+export const cbdGearbox = (key: string) => {
+  switch (key) {
+    case 'selector_gearbox_manualShift':
+      return 'Manuell';
+      break;
+    case 'selector_gearbox_automatic':
+      return 'Automatik';
+      break;
+    case 'selector_gearbox_semiAutomatic':
+      return 'Halbautomatik';
+      break;
+    default:
+      return 'N/A';
+  }
+};
+
+export const cbdFuel = (key: string) => {
+  switch (key) {
+    case 'selector_fuel_petrol':
+      return 'Benzin';
+      break;
+    case 'selector_fuel_diesel':
+      return 'Diesel';
+      break;
+    case 'selector_fuel_naturalGas':
+      return 'Erdgas';
+      break;
+    case 'selector_fuel_carGas':
+      return 'Autogas';
+      break;
+    case 'selector_fuel_electrical':
+      return 'Elektro';
+      break;
+    case 'selector_fuel_hydrogen':
+      return 'Wasserstoff';
+      break;
+    case 'selector_fuel_ethanol':
+      return 'Ethanol';
+      break;
+    case 'selector_fuel_hybridElectricalPetrol':
+      return 'Hybrid (Elektro / Benzin)';
+      break;
+    case 'selector_fuel_hybridElectricalDiesel':
+      return 'Hybrid (Elektro / Diesel)';
+      break;
+    default:
+      return 'N/A';
+  }
+};
+
+export const cbdConsumptionUnit = (key: string) => {
+  switch (key) {
+    case 'selector_fuel_petrol':
+      return 'l/100km';
+      break;
+    case 'selector_fuel_diesel':
+      return 'l/100km';
+      break;
+    case 'selector_fuel_naturalGas':
+      return 'kg/100km';
+      break;
+    case 'selector_fuel_carGas':
+      return 'kg/100km';
+      break;
+    case 'selector_fuel_electrical':
+      return 'kWh/100km';
+      break;
+    case 'selector_fuel_hydrogen':
+      return 'kg/100km';
+      break;
+    case 'selector_fuel_ethanol':
+      return 'kg/100km';
+      break;
+    case 'selector_fuel_hybridElectricalPetrol':
+      return 'l/100km';
+      break;
+    case 'selector_fuel_hybridElectricalDiesel':
+      return 'l/100km';
+      break;
+    default:
+      return 'N/A';
+  }
+};
+
+export const cbdConsumptionUnitWithKomb = (key: string) => {
+  switch (key) {
+    case 'selector_fuel_petrol':
+      return 'l/100km (komb)*';
+      break;
+    case 'selector_fuel_diesel':
+      return 'l/100km (komb)*';
+      break;
+    case 'selector_fuel_naturalGas':
+      return 'kg/100km (komb)*';
+      break;
+    case 'selector_fuel_carGas':
+      return 'kg/100km (komb)*';
+      break;
+    case 'selector_fuel_electrical':
+      return 'kWh/100km (komb)*';
+      break;
+    case 'selector_fuel_hydrogen':
+      return 'kg/100km (komb)*';
+      break;
+    case 'selector_fuel_ethanol':
+      return 'kg/100km (komb)*';
+      break;
+    case 'selector_fuel_hybridElectricalPetrol':
+      return 'l/100km (komb)*';
+      break;
+    case 'selector_fuel_hybridElectricalDiesel':
+      return 'l/100km (komb)*';
+      break;
+    default:
+      return 'N/A';
+  }
+};