@bytebrand/fe-ui-core-autobahn 1.0.59 → 1.0.61

package/cards/CarCard.tsx

@@ -18,7 +18,7 @@
 import React, { useState } from 'react';
 import { TranslationFunction } from '../types';
 
-import { CardCarousel, IconButton, StatChip, SaveChip, Button } from '../ui';
+import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
 import {
   SpecLine,
   EcoLine,
@@ -28,15 +28,18 @@ import {
   OfferBadge,
   PriceTabs,
   PriceHero,
-  PriceMeter,
+  PriceEvalCol,
+  PriceTerms,
   CardCtaRow,
   GalleryCounter,
+  GalleryActivityPill,
   cardSpec,
   PaymentMode,
-  ratingTone,
   callDealerSalesPhone,
+  DEALER_SALES_PHONE,
 } from './cardParts';
 import { AutobahnCar } from './types';
+import VdpViewer from '../vdp/VdpViewer';
 
 export interface CarCardProps {
   /** fully-resolved car view-model. */
@@ -85,6 +88,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
+  const [viewerOpen, setViewerOpen] = useState(false);
   const showSave = car.savings != null && car.savings > 600;
   const showOfferBadge = !!(car.isNew || car.drop != null || showSave || car.dropPct != null || car.zeroDown);
   return (
@@ -102,6 +106,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
         <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
         {/* max two overlays: heart + ONE deal signal — rating moved next to the price */}
         <div
+          className="cc-fav"
           style={{ position: 'absolute', top: 6, right: 6, zIndex: 3 }}
           onClick={(e) => e.stopPropagation()}
         >
@@ -112,6 +117,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             SaveChip; each only renders when its real data exists. */}
         {(showOfferBadge || car.dropPct != null) && (
           <div
+            className="cc-badges"
             style={{
               position: 'absolute',
               top: 10,
@@ -133,12 +139,22 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
             <OfferBadge show={showOfferBadge} t={t} />
           </div>
         )}
-        {/* bottom-left: expand icon + "current|total" photo counter (Figma) */}
-        <div style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
-          <GalleryCounter current={photoIndex + 1} total={car.photos} />
+        {/* bottom-left: expand icon + "current | total" photo counter (Figma light pill, node
+            281:1016) — opens the full VdpViewer lightbox; stopPropagation keeps the click off
+            the card's own onOpen (React portals still bubble through the React tree, not the
+            DOM tree, so this guard is needed even though VdpViewer renders via createPortal). */}
+        <div
+          style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GalleryCounter current={photoIndex + 1} total={car.photos} light onClick={() => setViewerOpen(true)} />
+        </div>
+        {/* bottom-right: eye/heart activity pill — real stats only (Figma "Push Chips / Likes", node 297:1037) */}
+        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
-      <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
+      <div style={{ padding: '10px 18px', display: 'flex', flexDirection: 'column', gap: 0, flex: 1 }}>
         <div>
           <div className="md-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
             {car.make} {car.model}
@@ -148,23 +164,30 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           </div>
         </div>
         <SpecLine items={cardSpec(car)} oneLine />
-        <div style={{ flex: 1 }} />
-        <div className="cc-price" style={{ marginTop: 4, borderTop: '1px solid var(--md-outline-variant)', paddingTop: 10 }}>
+        <div className="cc-price" style={{ marginTop: 4, 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} />
-            {car.rating && (
-              <StatChip
-                tone={ratingTone(car.rating)}
-                icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}
-              >
-                {t('autobahn:tier.' + car.rating)}
-              </StatChip>
-            )}
+            <PriceEvalCol car={car} t={t} />
           </div>
-          <PriceMeter car={car} t={t} />
+          {/* 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))} t={t} />
         </div>
-        <EcoLine t={t} car={car} style={{ marginTop: 8 }} />
+        <EcoLine
+          t={t}
+          car={car}
+          style={{
+            marginTop: 'auto',
+            fontFamily: 'Arial, Helvetica, sans-serif',
+            fontStyle: 'normal',
+            fontWeight: 400,
+            fontSize: 11,
+            lineHeight: '11px',
+            textAlign: 'justify',
+            color: '#0e2238',
+          }}
+        />
         {/* Mobile-only row (CardCtaRow itself carries the show-mobile class) — always
             rendered, with real fallbacks the page can override once it wires its own
             handlers (e.g. the "Rate anpassen" FinanceDetailsModal sheet). Never hidden. */}
@@ -191,6 +214,19 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
           </div>
         )}
       </div>
+      {viewerOpen && (
+        <div onClick={(e) => e.stopPropagation()}>
+          <VdpViewer
+            images={car.galleryLarge || car.gallery}
+            start={photoIndex}
+            onClose={() => setViewerOpen(false)}
+            t={t}
+            phone={DEALER_SALES_PHONE}
+            onCall={onCall || callDealerSalesPhone}
+            onEmail={onRequestOffer || (() => onOpen(car))}
+          />
+        </div>
+      )}
     </article>
   );
 };

package/cards/CarRow.tsx

@@ -31,6 +31,8 @@ import {
   OfferBadge,
   PriceTabs,
   PriceHero,
+  PricePaths,
+  PriceKauf,
   DropChip,
   PercentChip,
   ZeroDownChip,
@@ -104,7 +106,8 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           <div style={{ display: 'flex', flexWrap: 'nowrap', alignItems: 'center', gap: 5 }}>
             {car.isNew && <span className="neu-badge">NEU</span>}
             {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-            <ZeroDownChip t={t} show={car.zeroDown} compact />
+            <ZeroDownChip t={t} show={car.zeroDown} compact className="show-mobile" />
+            <ZeroDownChip t={t} show={car.zeroDown} className="hide-mobile" />
             <PercentChip pct={car.dropPct} />
           </div>
           <OfferBadge show={showOfferBadge} t={t} />
@@ -121,6 +124,14 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         >
           <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
         </div>
+        {/* desktop: heart sits on the photo itself (Figma "mcard"), not next to the title. */}
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="hide-mobile"
+          style={{ position: 'absolute', top: 10, right: 10, zIndex: 3 }}
+        >
+          <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+        </div>
         {/* activity/trust badges — overlaid on the studio-white floor at the bottom of the photo
             itself (PM ref), not a separate divided strip below it. Bottom-right, raised above the
             carousel dots and the photo-count badge (positioning lives in .gallery-badges, md3.css). */}
@@ -128,17 +139,12 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       </div>
 
       <div className="listcard-info">
-        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
-          <div style={{ minWidth: 0 }}>
-            <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
-              {car.make} {car.model}
-            </div>
-            <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {car.trim}
-            </div>
+        <div style={{ minWidth: 0 }}>
+          <div className="md-title" style={{ fontSize: 18, lineHeight: 1.2 }}>
+            {car.make} {car.model}
           </div>
-          <div onClick={(e) => e.stopPropagation()} className="hide-mobile">
-            <IconButton name="heart" active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          <div className="md-body-sm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {car.trim}
           </div>
         </div>
         <div className="specstrip">
@@ -160,12 +166,13 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
         <EcoLine t={t} car={car} />
       </div>
 
-      {/* price column: Finanzierung/Leasing/Kaufen tabs pick ONE hero price (same tabbed
-          component the grid CarCard uses), then the fixed Preisbewertung meter and the CTA,
-          anchored to the bottom (margin-top:auto) so the button sits flush at the foot. */}
+      {/* price column — mobile keeps the Finanzierung/Leasing/Kaufen tab switcher (ONE hero price
+          at a time); desktop shows all three payment paths stacked at once (Figma "mcard"), via
+          the previously-unused PricePaths/PriceKauf pair. Both variants share the same
+          Preisbewertung meter + CTA, anchored to the bottom (margin-top:auto on .pp-purchase). */}
       <div className="listcard-price">
-        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} />
-        <div className="pp-purchase">
+        <PriceTabs car={car} mode={mode} onModeChange={setMode} t={t} className="show-mobile" />
+        <div className="pp-purchase show-mobile">
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
             <PriceHero car={car} mode={mode} t={t} />
             {car.rating && (
@@ -204,6 +211,49 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
           )}
           <PpActivity t={t} car={car} />
         </div>
+
+        <PricePaths car={car} t={t} className="hide-mobile" />
+        <div className="pp-purchase hide-mobile">
+          <PriceKauf car={car} t={t} />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            {car.rating && (
+              <StatChip tone={ratingTone(car.rating)} icon={ratingTone(car.rating) === 'good' ? 'check' : 'minus'}>
+                {t('autobahn:tier.' + car.rating)}
+              </StatChip>
+            )}
+            <div style={{ flex: 1 }}>
+              <PriceMeter t={t} car={car} />
+            </div>
+          </div>
+          <div className="pp-cta">
+            <Button
+              variant="filled"
+              block
+              iconRight="arrow-right"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(car);
+              }}
+            >
+              {t('autobahn:card.cta.viewOffer')}
+            </Button>
+          </div>
+          {adminAction && (
+            <div className="pp-cta">
+              <Button
+                variant="outlined"
+                block
+                onClick={(e) => {
+                  e.stopPropagation();
+                  adminAction.onClick();
+                }}
+              >
+                {adminAction.label}
+              </Button>
+            </div>
+          )}
+          <PpActivity t={t} car={car} />
+        </div>
       </div>
     </article>
   );