@bytebrand/fe-ui-core 4.8.109 → 4.8.110

package/media/locales/de/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
   "co2": "{{co2}}g CO2/km (komb)*",
-  "co2Class": "CO2-Klasse {{class}} (komb)",
   "weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
   "weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
   "withoutDeposit": "ohne Anzahlung",

package/media/locales/en/promoSlider.json

@@ -1,7 +1,6 @@
 {
   "consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
   "co2": "{{co2}}g CO2/km (comb)*",
-  "co2Class": "CO2-class {{class}} (comb)",
   "weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
   "weDeliverToYou": "We deliver your car to you!",
   "withoutDeposit": "Without Deposit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.109",
+  "version": "4.8.110",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",
@@ -14,7 +14,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@bytebrand/car-schema-selectors": "^2.0.7",
     "@bytebrand/fe-histoslider": "3.0.0",
-    "@bytebrand/i18n-dictionaries": "^0.7.5",
+    "@bytebrand/i18n-dictionaries": "^1.5.2",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/material": "^5.9.0",
@@ -104,7 +104,9 @@
     "@types/react": "^16.8.3"
   },
   "scripts": {
-    "prepare": "node -e 0",
+    "build": "true",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
     "storybook": "start-storybook -p 6006",
     "clean": "rm -rf ./dist/*.*",
     "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",

package/source/components/AccordionWidget/AccordionWidget.styl

@@ -191,7 +191,6 @@
   height: 45px
   border-bottom 1px solid $grey-e
   text-transform: none
-  font-size: 11px
 
   +media-tablet-landscape-down()
     padding-top: 7px;
@@ -200,20 +199,9 @@
     color: rgba(0,0,0,.63);
     word-break: break-word;
 
-// ADV-88: consumption/CO2 line spans the full overview grid width on its own row.
-.accordionVehiclePropFull
-  grid-column: 1 / -1
-  height: auto
-  align-items: flex-start
-  line-height: 1.45
-  padding: 10px 7.5px
-  span
-    font-size: 10px
-    word-break: break-word
-
 .propertyIcon
   flex-shrink: 0;
-
+  
 .longTitle
   max-width: 157px
 

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -31,16 +31,13 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     return (
       <div className={styles.propertyContainer}>
         {data.map((prop, i) => {
-          // ADV-88: the consumption/CO2 line is long for (plug-in) hybrids — let it span the
-          // full grid width on its own row instead of being squeezed into one fixed-height cell.
-          const isFullWidth = (prop as any).fullWidth;
           return (
             <VehicleProperty
               key={i}
               description={prop.description}
               classNameIcon={styles.propertyIcon}
-              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
-              className={classnames(styles.accordionVehicleProp, isFullWidth ? styles.accordionVehiclePropFull : '')}
+              icon={prop.icon || 'no-image'}
+              className={styles.accordionVehicleProp}
             />
           );
         })}
@@ -48,42 +45,14 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     );
   };
 
-  // ADV-70: in the "Vehicle Details" section completely hide a spec row when its value is
-  // "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...), null or empty. The Overview section
-  // keeps "N/A" and is rendered separately (renderOverview/renderPropsBlock), so it is unaffected.
-  isHiddenSpecValue = (value: any): boolean => {
-    if (value === null || value === undefined) return true;
-    if (typeof value !== 'string') return false; // JSX / non-string content → always keep
-    const trimmed = value.trim();
-    if (trimmed === '' || trimmed === this.props.t('vehicleProps:value.na')) return true;
-    // Detect a zero numeric value regardless of unit/locale: de-DE uses "." as thousands
-    // separator and "," as decimal. Only a leading-zero magnitude normalises to exactly 0,
-    // so non-zero values (incl. codes like HSN "0588") are never hidden by mistake.
-    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
-    return numeric === 0;
-  };
-
   renderTable = (decoratedProps: IDecoratedProps, propsList: string[] = [], header: string): React.ReactNode => {
-    const visibleProps = propsList.filter((prop) => {
-      const decoratedProp = decoratedProps[prop];
-      if (!decoratedProp) return false;
-      const { value, isVisible = true } = decoratedProp;
-      // ADV-70 exception: the CO2 emission fields must ALWAYS be shown — even when 0 — because
-      // 0 g CO2/km is a real, legally-relevant value, so they bypass the N/A/0 hide rule.
-      // NOTE: the environment table's prop key is 'c02' (with a ZERO, see vehicleDetails.ts), not 'co2'.
-      const alwaysShow = prop === 'co2' || prop === 'c02' || prop === 'wltpCo2';
-      return isVisible && (alwaysShow || !this.isHiddenSpecValue(value));
-    });
-
-    if (visibleProps.length === 0) return null;
-
     return (
       <>
         <div className={styles.table}>
           <h3 className={styles.tableName}>{header}</h3>
-          {visibleProps.map((prop, i) => {
-            const { title, subTitle, value, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
-            return (
+          {propsList.map((prop, i) => {
+            const { title, subTitle, value, isVisible = true, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
+            return isVisible && (
               <div key={i} className={title ? styles.tr : ''}>
                 {title && <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
                   <span className={styles.title}>{title}</span>
@@ -131,20 +100,10 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     const { car } = this.props;
     const autoDeId = car.metaData && car.metaData.vehicleId;
     const { consumption } = car;
-    // ADV-88: ANY plug-in hybrid (new or used) gets the long weighted+discharged line and the
-    // full-width treatment. Gated on hybridPlugin only, no condition check.
-    // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
-    const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
-      || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
     const mainPropertiesList = getOverviewDetails(consumption.fuel);
-    const mainProperties = mainPropertiesList.map((prop: string) => {
-      const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-      return {
-        icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
-        description: this.props.decoratedProps[prop].value,
-        fullWidth: isConsumptionAlternateView && isPluginHybrid
-      };
-    });
+    const mainProperties = mainPropertiesList.map((prop: string) => (
+      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
+    );
     return (
       <div>
         {this.renderPropsBlock(mainProperties)}

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -21,7 +21,7 @@ export interface ICheckboxProps {
   checkboxClassName?: string;
   labelClassName?: string;
   labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: React.ReactNode;
+  tooltipDescription?: string;
   checkboxPriceValue: any;
   tooltipPosX?: string;
   error?: boolean;
@@ -128,7 +128,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip zindex={10000} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -111,30 +111,6 @@
     max-height: inherit;
     width: inherit !important
 
-  :global
-    .MuiTooltip-tooltip
-      max-width: 360px !important
-      font-size: 11px
-      line-height: 1.45
-      color: #4C4E64AD
-      text-align: left
-
-      b
-        display: block
-        margin-bottom: 6px
-        font-size: 12px
-        color: #1a1a1a
-
-      p
-        margin: 0 0 6px
-
-      ul
-        margin: 4px 0 0
-        padding-left: 16px
-
-      li
-        margin-bottom: 3px
-
 .checkboxPrice
   align-self: center;
   color: rgba(#000000, .63);

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -11,11 +11,12 @@ interface IOfferPeriod {
   transferInstallments?: any;
 }
 
-const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, isAboAccordionExpanded0 = true, priceTabIndex }) => {
+const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInstallments, isAboAccordionExpanded0 = true, priceTabIndex }) => {
   const offerGroupClass = classNames(styles.checkboxWrapped, { [styles.checkBoxGroup]: priceTabIndex !== THREE });
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
+      <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />
     </div>
   );
 };

package/source/components/OfferPanel/OfferPanel.tsx

@@ -71,7 +71,7 @@ const OfferPanel: FC<IFinancingPanel> = ({
 
           {priceTabIndex === THREE
             ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService }} /></div>}
         </>
       }
     </form>

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 import _get from 'lodash/get';
 import { Hidden } from 'react-grid-system';
 import PriceContent from './partials/PriceContent';
@@ -104,31 +104,19 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
-  const initialDefaultAppliedForPath = useRef<string | null>(null);
-
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
-    if (getlocalStorageActiveTabCDP) {
-      const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
-        return title === getlocalStorageActiveTabCDP;
-      });
-      if (activeTab === -1) {
-        setActiveTab(null, 0);
-      } else {
-        setActiveTab(null, activeTab);
-      }
-      localStorage.removeItem('activeTabCDP');
-      initialDefaultAppliedForPath.current = pathname;
-      return;
-    }
-    if (
-      initialDefaultAppliedForPath.current !== pathname
-      && _get(price, 'leasing.isActive', false)
-    ) {
-      setActiveTab(null, 1);
-      initialDefaultAppliedForPath.current = pathname;
+    if (!getlocalStorageActiveTabCDP) return;
+    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
+      return title === getlocalStorageActiveTabCDP;
+    });
+    if (activeTab === -1) {
+      setActiveTab(null, 0);
+    } else {
+      setActiveTab(null, activeTab);
     }
-  }, [pathname, activeTab, price]); // tslint:disable-line:align
+    localStorage.removeItem('activeTabCDP');
+  }, [pathname, activeTab]); // tslint:disable-line:align
 
   const priceProps = {
     tabsTitles,

package/source/components/VehicleDetailedSidebar/partials/Properties.styl

@@ -15,11 +15,6 @@
   &:nth-child(2)
     border-top-color: transparent;
 
-// ADV-70: full-width consumption/CO2 row in the sidebar Overview tab.
-.propertyFull
-  flex-basis: 100%
-  width: 100%
-
 .details
   display: flex
   flex-direction: row

package/source/components/VehicleDetailedSidebar/partials/Properties.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import classNames from 'classnames';
 import _get from 'lodash/get';
 import { IPropertiesProps, ICarPropElement } from '../../../framework/types/types';
 import { getActualHighlights } from '../../../framework/constants/highlights';
@@ -41,19 +40,18 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
     : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
   };
 
-  // ADV-70: hide a spec line whose value is "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...),
-  // null or empty — mirrors AccordionWidget.isHiddenSpecValue. de-DE thousands "." / decimal ","
-  // are normalised so only a true zero magnitude hides; codes like HSN "0588" stay visible.
-  const isHiddenSpecValue = (value: any): boolean => {
-    if (value === null || value === undefined) return true;
-    if (typeof value !== 'string') return false; // JSX / non-string content → always keep
-    const trimmed = value.trim();
-    if (trimmed === '' || trimmed === t('vehicleProps:value.na')) return true;
-    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
-    return numeric === 0;
-  };
-
   const renderDetails = (): React.ReactNode => {
+    const sectionNames = [
+      t(`sidebar.dataEngine`),
+      t(`sidebar.dimensions`),
+      t(`sidebar.generalData`),
+      t(`sidebar.equipments`)
+    ];
+    const detailPropertiesList = ['cubicCapacity', 'torque', 'length', 'width', 'doors', 'fuel'];
+    const detailProperties = detailPropertiesList.map(
+      (prop: string) => (`${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
+    );
+
     const equipmentsObj = {
       ...addPrefixToKeys(car.lights, 'lights'),
       ...addPrefixToKeys(car.multimedia, 'multimedia'),
@@ -65,41 +63,14 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
       .slice(0, 2)
       .map(prop => t(`cbd:${prop}`));
 
-    // ADV-70: build each section's visible lines, dropping N/A/0 values. A section that loses
-    // all its lines (e.g. "Maße & Abmessungen" when length+width are both N/A) is removed and
-    // the next section flows up so there is no gap in the 2-column grid.
-    const sectionsConfig: Array<{ title: string; props?: string[]; lines?: string[] }> = [
-      { title: t(`sidebar.dataEngine`), props: ['cubicCapacity', 'torque'] },
-      { title: t(`sidebar.dimensions`), props: ['length', 'width'] },
-      { title: t(`sidebar.generalData`), props: ['doors', 'fuel'] },
-      { title: t(`sidebar.equipments`), lines: equipmentsArr.length ? [equipmentsArr.join(', ')] : [] }
-    ];
-
-    const visibleSections = sectionsConfig
-      .map(({ title, props, lines }) => ({
-        title,
-        lines: props
-          ? props
-              .filter(prop => decoratedProps[prop] && !isHiddenSpecValue(decoratedProps[prop].value))
-              .map(prop => `${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
-          : (lines || [])
-      }))
-      .filter(section => section.lines.length > 0);
-
-    if (!visibleSections.length) return null;
-
-    // Class by VISIBLE position, not original index: the first two sections form the top row
-    // (detailsItemFirstLine — padding-top 7px), the rest the bottom row (detailsItemLastLine —
-    // padding-top 20px). So a section promoted into the top row drops its 20px top padding,
-    // while a section that stays in the bottom row keeps it.
+    detailProperties.push(equipmentsArr.join(', '));
     return (
       <div className={styles.details}>
-        {visibleSections.map(({ title, lines }, i) => (
+        {sectionNames.map((title, i) => (
           <div key={i} className={i > 1 ? styles.detailsItemLastLine : styles.detailsItemFirstLine}>
             <h4 className={styles.detailsTitle}>{title}</h4>
-            {lines.map((line, j) => (
-              <span key={j} className={styles.detailsContent}>{line}</span>
-            ))}
+            <span className={styles.detailsContent}>{detailProperties[0 + i * 2]}</span>
+            <span className={styles.detailsContent}>{detailProperties[1 + i * 2]}</span>
           </div>
         ))}
       </div>
@@ -107,24 +78,15 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
   };
 
   const mainPropertiesList = getOverviewDetails(car.consumption.fuel);
-  // ADV-70: the consumption/CO2 line is long — let it span the full sidebar width on its own
-  // row (and drop the fuel icon) instead of being squeezed into one 50% column.
-  const mainProperties = mainPropertiesList.map((prop: string) => {
-    const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-    return {
-      icon: isConsumptionAlternateView ? '' : decoratedProps[prop].icon,
-      description: decoratedProps[prop].value,
-      fullWidth: isConsumptionAlternateView
-    };
-  });
+  const mainProperties = mainPropertiesList.map((prop: string) => ({ icon: decoratedProps[prop].icon, description: decoratedProps[prop].value }));
 
   const tabsTitles = [
     {
       title: `${t(`sidebar.overview`)}`,
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
-          {mainProperties.map(({ fullWidth, ...property }: any, index: number) => (
-            <VehicleProperty {...property} className={classNames(styles.property, fullWidth ? styles.propertyFull : '')} key={index} />
+          {mainProperties.map((property: any, index: number) => (
+            <VehicleProperty {...property} className={styles.property} key={index} />
           ))}
         </div>
       )

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -46,6 +46,8 @@ interface IProps {
   showDownPayment: boolean;
   financingFirstInstallment?: number | null;
   leasingFirstInstallment?: number | null;
+  sliderFinancingFirstInstallment?: number | null;
+  sliderLeasingFirstInstallment?: number | null;
   handleSentryInit?: () => void;
 }
 
@@ -312,11 +314,12 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       showDownPayment,
       financingFirstInstallment,
       leasingFirstInstallment,
+      sliderFinancingFirstInstallment,
+      sliderLeasingFirstInstallment,
       subModel,
       powerKW,
       powerPS,
       activeTab,
-      financingConfig,
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
@@ -338,11 +341,12 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
-      financingConfig,
       showNewLabel,
       showDownPayment,
       financingFirstInstallment,
       leasingFirstInstallment,
+      sliderFinancingFirstInstallment,
+      sliderLeasingFirstInstallment,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
       historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
       activeTab

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl

@@ -70,11 +70,6 @@
     +media-tablet-landscape-up()
       font-size: 9px;
 
-  &.priceItemCategoryLanding,
-  &.priceItemCategoryMain
-    +media-tablet-landscape-up()
-      font-size: 10px;
-
   & > span:hover
     background: rgba(196, 196, 196, 0.6);
 
@@ -127,43 +122,6 @@
   &.priceMtlActive
     transform: translateX(6px);
 
-// ADV-70: monthly label rendered before the rate (small, top-left of the number).
-.priceCurrentWrap
-  display: inline-flex
-  align-items: flex-start
-
-.priceMtlPrefix
-  font-size: 10px
-  line-height: 1.2
-  margin-right: 3px
-  color: rgba(76, 78, 100, 0.6)
-  align-self: flex-start
-  white-space: nowrap
-
-// ADV-88 (Marco): the monthly "mtl."/"mth." label sits INLINE to the LEFT of the rate (top-
-// aligned), not stacked above. NOTE: on the narrowest 4-up landing/main card (~256px) the
-// inline label can graze the card edge at full font; the wide comparable/CDP card fits with
-// room. (Marco asked to keep the rate/category fonts untouched — only the label moved.)
-.priceItemComparable
-  .priceCurrentWrap
-    flex-direction: row
-    align-items: flex-start
-  .priceMtlPrefix
-    font-size: 8px
-    line-height: 1
-    margin-right: 2px
-    align-self: flex-start
-
-// landing (/angebot): on desktop the cards are a narrow 4-up grid where the inline label would
-// overflow the price column — stack "mtl."/"mth." above the rate there (mobile stays inline above).
-.priceItemLanding
-  +media-tablet-landscape-up()
-    .priceCurrentWrap
-      flex-direction: column
-      align-items: flex-end
-    .priceMtlPrefix
-      margin-right: 0
-
 .priceNewBlock
   flex-shrink: 0;
   width: 18px

package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -39,10 +39,7 @@ export interface IVehiclePriceItemProps {
   isMarge?: boolean;
 }
 class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
-  routeToActiveTab = () => {
-    const { priceTitle } = this.props;
-    localStorage.setItem('activeTabCDP', priceTitle);
-  }
+  routeToActiveTab = () => {}
 
   render(): React.ReactNode {
     const {
@@ -81,9 +78,6 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
       { [styles.priceItemSearch]: vehicleComponentName === 'search' },
       { [styles.priceItemRecently]: vehicleComponentName === 'recently' },
       { [styles.priceItemComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-      // landing (/angebot) cards are a narrow 4-up grid on desktop where the inline monthly
-      // label would overflow — keep it stacked there, inline only on the wide single-column mobile.
-      { [styles.priceItemLanding]: vehicleComponentName === 'landing' },
       { [styles.priceItemDisable]: isPriceDisable },
       { [styles.priceItemBuy]: isTotal }
     );
@@ -91,9 +85,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
     const priceItemCategoryClassName = classnames(
       styles.priceItemCategory,
       { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
-      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
-      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
     );
 
     return (
@@ -142,19 +134,15 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
                   )}
 
                   {perMonthCurrent && (
-                    <span className={styles.priceCurrentWrap}>
-                      {/* ADV-70 (design): monthly label ("mtl."/"mth.") now sits BEFORE the rate
-                          instead of as a "/mtl." suffix after it. */}
-                      {priceSub && <span className={styles.priceMtlPrefix}>{priceSub.replace(/^\//, '')}</span>}
-                      <VehicleFormattedPrice
-                        numbersAfterDot={0}
-                        price={perMonthCurrent}
-                        postfix={postfix}
-                        className={styles.priceMtl}
-                        isNew={isStrikeShown}
-                        size='semimedium'
-                      />
-                    </span>
+                    <VehicleFormattedPrice
+                      numbersAfterDot={0}
+                      price={perMonthCurrent}
+                      postfix={postfix}
+                      className={classnames(styles.priceMtl, { [styles.priceMtlActive]: !!priceSub })}
+                      isNew={isStrikeShown}
+                      size='semimedium'
+                      sub={priceSub}
+                    />
                   )}
                 </>
               ) : (