@bytebrand/fe-ui-core-autobahn 1.0.67 → 1.0.68

package/cards/cardParts.tsx

@@ -475,6 +475,11 @@ export interface PriceHeroProps {
   car: AutobahnCar;
   mode: PaymentMode;
   t: TranslationFunction;
+  /** opt-in: render the "/mtl." unit next to the rate even without a struck old price to caption
+   *  (default false keeps every existing caller's behavior — the unit only ever showed alongside
+   *  the UVP-Rate/old-price group). The SRP desktop card wants the unit on every financing/leasing
+   *  rate, discounted or not. */
+  alwaysShowUnit?: boolean;
 }
 
 /** footnote badge + click-to-open popover, shared by the Finanzierung/Leasing "UVP-Rate" (³) and
@@ -529,7 +534,7 @@ const UvpBadge: React.FunctionComponent<{
  * superscript footnote markers (¹ price, ² struck reference, ³ "/mtl.") match the Figma card —
  * their legal text lives in the page's own footnote block, not duplicated per-card.
  */
-export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t }) => {
+export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode, t, alwaysShowUnit }) => {
   const [uvpTooltipOpen, setUvpTooltipOpen] = useState(false);
   const isMoney = mode === 'buy';
   const value = mode === 'financing' ? car.monthly : mode === 'leasing' ? (car.lease as number) : car.price;
@@ -578,6 +583,10 @@ export const PriceHero: React.FunctionComponent<PriceHeroProps> = ({ car, mode,
             <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>
           </span>
         )}
+        {/* opt-in (alwaysShowUnit): no discount to caption, so just the plain unit next to the
+            rate instead of the full UVP-Rate/old-price group — existing callers that don't pass
+            this prop keep showing nothing here, exactly as before. */}
+        {!isMoney && !showOld && alwaysShowUnit && <span className="pp-hero-unit">{t('autobahn:card.price.perMonth')}</span>}
         {/* Kaufen: no rate/unit to caption, just the real list price struck through — same
             car.listPrice already used by DropChip/PpRow. */}
         {isMoney && showOld && (
@@ -865,7 +874,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
           struck price / mtl." group beside the rate that .cc-price and mobile's tab switcher
           already use, so the rate + unit never fight for room in one flat row (the earlier
           hand-rolled version here put them side by side and wrapped for any 4+-digit rate). */}
-      <PriceHero car={car} mode="financing" t={t} />
+      <PriceHero car={car} mode="financing" t={t} alwaysShowUnit />
       <div className="pp-hero-terms">
         {t('autobahn:card.price.financeTerms', {
           firstInstallment: finFirstInstallment,

package/package.json

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