@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import VehicleFormattedPrice from '../../../VehicleFormattedPrice/VehicleFormattedPrice';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import classnames from 'classnames';
+// import Tooltip from '../../../Tooltip/Tooltip';
+import styles from './VechiclePriceItem.styl';
+// import { isMobileOnly } from 'react-device-detect';
+import { IPrice } from '../../../../types/types';
+import MaterialTooltip from '../../../MdTooltip/MdTooltip';
+
+export interface IVehiclePriceItemProps {
+  priceTitle: string;
+  tooltipDescription?: string;
+  priceSub?: string;
+  price?: IPrice;
+  isTotal: Boolean;
+  isNewPriceCategory: Boolean;
+  showAboIcon: Boolean;
+  isPriceDisable: Boolean;
+  isAlternativeText?: string;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  perMonthCurrent?: number;
+  iconName?: string;
+  prefixOldPrice?: string;
+  perMonthOld?: number;
+  totalCurrent?: number;
+  totalOld?: number;
+  positionX?: string;
+  positionY?: string;
+  url?: string;
+  target?: string;
+  rel?: string;
+  routeObj?: any;
+  linkTag?: string;
+  isStrikeShown?: boolean;
+  combineRefAlternative?: boolean;
+  postfix?: string;
+  margin?: number;
+  isMarge?: boolean;
+}
+class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
+  routeToActiveTab = () => {
+    const { priceTitle } = this.props;
+    localStorage.setItem('activeTabCDP', priceTitle);
+  }
+
+  render(): React.ReactNode {
+    const {
+      priceTitle,
+      perMonthCurrent,
+      perMonthOld,
+      url,
+      target,
+      rel,
+      totalOld,
+      totalCurrent,
+      tooltipDescription,
+      // positionX,
+      // positionY,
+      // iconName,
+      postfix,
+      linkTag,
+      routeObj,
+      // combineRefAlternative,
+      prefixOldPrice,
+      // margin,
+      isAlternativeText,
+      vehicleComponentName,
+      priceSub,
+      isTotal = false,
+      showAboIcon = false,
+      isPriceDisable = false,
+      isNewPriceCategory = false,
+      isStrikeShown = false,
+      isMarge
+    } = this.props;
+
+    const stylesItem = classnames(
+      styles.priceItem,
+      { [styles.priceItemFavorite]: vehicleComponentName === 'favorite' },
+      { [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 }
+    );
+
+    const priceItemCategoryClassName = classnames(
+      styles.priceItemCategory,
+      { [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+      { [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' },
+      { [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
+      { [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
+    );
+
+    return (
+      <div className={stylesItem}>
+        {React.createElement(linkTag, {
+          children: priceTitle,
+          ...routeObj,
+          target,
+          rel,
+          onClick: this.routeToActiveTab,
+          className: priceItemCategoryClassName,
+          href: url
+        })}
+        {tooltipDescription && (
+          <MaterialTooltip
+            className={styles.tooltipWrapFavorites}
+            text={tooltipDescription}
+            // positionX={positionX}
+            // positionY={positionY}
+            icon='infoIcon'
+            disabled={isPriceDisable}
+          />
+        )}
+        {isNewPriceCategory && (
+          <span className={styles.priceNewBlock}>neu</span>
+        )}
+        {isAlternativeText && <span className={styles.isAlternativeText}>{isAlternativeText}</span>}
+        {showAboIcon && !isPriceDisable && <IconSVG className={styles.aboPartnerIcon} name='aboPartner' />}
+        {React.createElement(linkTag, {
+          children: (
+            <>
+              {!isPriceDisable ? (
+                <>
+                  {isStrikeShown && perMonthOld && (
+                    <div className={styles.oldPriceWrap}>
+                      {prefixOldPrice && <span className={styles.prefixOldPrice}>{prefixOldPrice}</span>}
+                      <VehicleFormattedPrice
+                        numbersAfterDot={0}
+                        className={styles.oldPrice}
+                        price={perMonthOld}
+                        size='semimedium'
+                        isOld
+                        disableStyles
+                      />
+                    </div>
+                  )}
+
+                  {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>
+                  )}
+                </>
+              ) : (
+                <span className={styles.noPrice}>---</span>
+              )}
+
+              {isStrikeShown && isTotal && !isMarge && (
+                <VehicleFormattedPrice
+                  numbersAfterDot={0}
+                  className={styles.oldPrice}
+                  price={totalOld}
+                  postfix={isStrikeShown ? '2' : ''}
+                  size='semimedium'
+                  isOld
+                  disableStyles
+                />
+              )}
+              {totalCurrent && isTotal && (
+                <VehicleFormattedPrice
+                  numbersAfterDot={0}
+                  price={totalCurrent}
+                  isNew={isStrikeShown}
+                  toRound={false}
+                  size='semimedium'
+                  afterCommaClassName={styles.priceAfterComma}
+                  postfix={postfix}
+                />
+              )}
+            </>
+          ),
+          ...routeObj,
+          target,
+          rel,
+          onClick: this.routeToActiveTab,
+          className: styles.priceItemPrice,
+          href: url
+        })}
+      </div>
+    );
+  }
+}
+export default VehiclePriceItem;

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -0,0 +1,273 @@
+@import '../../../legacy-theme/mixins.styl';
+
+.vehicleInfo
+  box-sizing: border-box
+  padding: 8px 7px 14px 7px
+  flex-shrink: 0;
+  display: grid;
+  text-align: left;
+  text-decoration none;
+  color: inherit;
+  position relative;
+  grid-area: info;
+
+  & > .consumptionCombined
+    font-size: 9px
+
+  // ADV-88: new plug-in hybrid consumption line — full-width row at the very bottom of the
+  // card on every breakpoint. `order` pushes it past the price-rating strip so the long text
+  // never overlaps it; overrides the per-variant desktop reset to grid-column/grid-row: auto.
+  & > .pluginFullWidth
+    grid-column: 1 / -1 !important
+    grid-row: auto !important
+    order: 99
+    height: auto !important
+    align-items: flex-start
+    white-space: normal
+    border-bottom: none
+    padding-top: 4px
+    span
+      font-size: 9px
+      line-height: 1.35
+
+  +media-tablet-landscape-down()
+    padding: 0 10px;
+
+  &::after
+    content: '';
+    position absolute;
+    right: 0;
+    width: 1px;
+    height: calc(100% - 10px);
+    top: 10px;
+    background-color rgba(76, 78, 100, 0.12);
+
+  &.vehiclePropertiesLanding
+    grid-auto-rows: minmax(44px, auto);
+    grid-template-columns: 1fr 1fr;
+    padding: 0 3px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-column: 1 / span 2;
+      grid-row: 4;
+
+    & > div:last-of-type
+      grid-column: 1 / span 2;
+
+    +media-tablet-landscape-up()
+      padding-top: 2px;
+      grid-auto-rows: minmax(38px, auto);
+      grid-template-columns: 100%;
+
+      span
+        font-size: 11px;
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesMain
+    grid-auto-rows: minmax(44px, auto);
+    grid-template-columns: 100%;
+    padding: 0 6px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+    // mobile (home top-offer / CDP comparable): vertically centre the "good price" block.
+    +media-tablet-landscape-down()
+      & > .priceRating
+        align-self: center
+        margin: auto 0
+
+    +media-tablet-landscape-up()
+      grid-auto-rows: minmax(38px, auto);
+
+      span
+        font-size: 11px;
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesComparable
+    grid-template-columns: 100%;
+    grid-auto-rows: 40px;
+
+    +media-phone-only()
+      padding: 16px 12px 18px 12px;
+
+      &::after
+        height: calc(100% - 20px);
+
+    +media-phone-up()
+      grid-auto-rows: 38px;
+
+      & > .consumptionCombined span
+        font-size: 8px
+
+    +media-tablet-landscape-up()
+      grid-auto-rows: 36px;
+
+      span
+        font-size: 11px;
+
+      & .priceRatingSegmentWrapSRL
+        gap: 2px;
+        & > div
+          width: 13px;
+          height: 12px;
+
+      & .priceRatingSRL span
+        font-size: 8px;
+        margin-bottom: 2px;
+
+  &.vehiclePropertiesSearch,
+  &.vehiclePropertiesMyVehicles
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: 44px;
+
+    // ADV-70: underline the price-rating ("GUTER PREIS") cell like the spec rows above it —
+    // stretch it to fill the grid cell so the border sits at the same baseline.
+    & > .priceRating
+      margin: 0
+      align-self: stretch
+      display: flex
+      flex-direction: column
+      justify-content: center
+      border-bottom: 1px solid rgba(76, 78, 100, 0.12)
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-column: 1 / span 2;
+      grid-row: 4;
+
+    & > .location
+      grid-column: 1 / span 2;
+
+      +media-tablet-landscape-up()
+        height: 30px;
+        margin-top: auto;
+        border: none;
+
+    & > div:last-of-type
+      grid-column: 1 / span 2;
+
+    &::after
+      height: calc(100% - 20px);
+
+    +media-tablet-landscape-up()
+      margin-top: -13px;
+      padding: 0;
+      grid-auto-rows: 52px;
+
+      &:after
+        display none
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & > .offerAvailability
+        border: none;
+
+  &.vehiclePropertiesFavorite
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+    +media-tablet-landscape-up()
+      grid-template-columns: 1fr 1fr 1fr;
+      margin-top: -13px;
+      padding: 0;
+      grid-auto-rows: 52px;
+
+      &:after
+        display none
+
+      & > .consumptionCombined,
+      & > div:last-of-type
+        grid-column: auto;
+        grid-row: auto;
+
+      & > .offerAvailability
+        border: none;
+        & + div
+          border: none;
+
+  &.vehiclePropertiesRecently
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-auto-rows: 44px;
+    padding: 0 10px;
+
+    & > .consumptionCombined
+      white-space: pre-line;
+      grid-row: 4;
+
+  &.vehiclePropertiesMyVehicles
+    &::after
+      +media-tablet-landscape-down()
+        height: calc(100% - 10px);
+
+  &.vehiclePropertiesIsAlternative
+    +media-tablet-landscape-up()
+      grid-auto-rows: 62px;
+      margin-top: -68px;
+
+.priceRating
+  margin: auto;
+  box-sizing: border-box;
+
+// ADV-88: SRL DESKTOP — hide the availability ("Sofort"/"from {date}") cell ONLY for NEW plug-in
+// hybrids (engineData.hybridPlugin + mainData.condition selector_condition_new) so the price-rating
+// flows up into its place. All other cards keep availability; mobile keeps it for everyone.
+.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-up()
+    & > .offerAvailability
+      display: none
+
+// SRL MOBILE — centre the "good price" cell (horizontally + vertically) on ALL search cards.
+.vehicleInfo.vehiclePropertiesSearch
+  +media-tablet-landscape-down()
+    & > .priceRating
+      align-items: center
+      justify-content: center
+
+// SRL MOBILE — drop the "good price" underline ONLY for NEW plug-in hybrids (engineData.hybridPlugin
+// + mainData.condition selector_condition_new). The extra .searchPluginInfo makes this (0,4,0) so it
+// beats the base (0,3,0) border-bottom; non-plug-in cards keep the underline.
+.vehicleInfo.vehiclePropertiesSearch.searchPluginInfo
+  +media-tablet-landscape-down()
+    & > .priceRating
+      border-bottom: none

package/compat/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx

@@ -0,0 +1,179 @@
+/* tslint:disable */
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './VehicleInfo.styl';
+import PriceRating from '../../../PriceRating/PriceRating';
+import { Visible, Hidden } from 'react-grid-system';
+import { getPriceRating } from '../../../../utils/CommonUtils';
+import VehicleProperty from '../VehicleProperty/VehicleProperty'
+import getDecoratedProps from '../../../../vehiclesProps/decoratedLightProps';
+import {
+  getMainPropertiesForComparableCars,
+  getMainPropertiesForLandingCars,
+  getMainPropertiesForSRL,
+  getMainPropertiesForFavorite
+} from '../../../../vehiclesProps/vehicleDetails';
+import { IVehicleInfo } from '../../../../types/types';
+
+export type IVehicleInfoProps = IVehicleInfo;
+
+const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
+  const {
+    t,
+    mlCurrentSalesPricePredicted,
+    i18nPrefixForPriceRating,
+    vehicleComponentName,
+    combineRefAlternative,
+    mileage,
+    common: { currentSalesPrice },
+    language,
+    url,
+    target,
+    rel,
+    regDate,
+    linkTag,
+    routeObj,
+    gearbox,
+    numberOfPreviousOwners,
+    usageType,
+    condition,
+    damaged,
+    driveType,
+    environmentEmissions,
+    consumption,
+    location,
+    offer,
+    engineData,
+    suppressConsumption
+  } = props as (typeof props & { suppressConsumption?: boolean });
+  const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
+
+  const dataDecoratedProps = {
+    engineData,
+    mainData: {
+      mileage,
+      location,
+      offer,
+      numberOfPreviousOwners,
+      usageType,
+      condition,
+      damaged,
+      firstRegistration: firstRegistrationDate
+    },
+    driveSuspension: {
+      gearbox,
+      driveType
+    },
+    environmentEmissions: {
+      co2: environmentEmissions.co2,
+      wltpCo2: environmentEmissions.wltpCo2,
+      wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
+    },
+    consumption: {
+      fuel: consumption.fuel,
+      consumptionCombined: consumption.consumptionCombined,
+      consumptionPowerCombined: consumption.consumptionPowerCombined,
+      wltpCombined: consumption.wltpCombined,
+      wltpPowerCombined: consumption.wltpPowerCombined,
+      wltpWeightedPowerCombined: consumption.wltpWeightedPowerCombined,
+      wltpWeightedCombined: consumption.wltpWeightedCombined,
+    },
+  };
+
+  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
+  // line — render it full-width. 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 decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
+  const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
+    const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative)
+      // ADV-88: on landing/main the plug-in consumption line is rendered full-width by VehicleSmallCard.
+      .filter((prop: string) => !(suppressConsumption && decoratedProps[prop] && decoratedProps[prop].name === 'consumptionCombined'))
+      .map((prop: string) => {
+      const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
+      // On non-SRL cards (and for the full-width plug-in line) drop the fuel-pump icon to free up space.
+      const hideConsumptionIcon = isConsumption && (vehicleComponentName !== 'search' || isPluginHybrid);
+      return {
+        icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
+        description: decoratedProps[prop].value,
+        className: classnames(styles[decoratedProps[prop].name], { [styles.pluginFullWidth]: isConsumption && isPluginHybrid }),
+        classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
+        smalltext: isConsumption && (vehicleComponentName !== 'search'),
+        hybridPlugin: isPluginHybrid && isConsumption && vehicleComponentName !== 'search'
+      };
+    });
+
+    return mainPropertiesList.map((property: any, index: number) => (
+      <VehicleProperty {...property} key={index} />
+    ))
+  };
+
+  const wrapClasses = classnames(
+    styles.vehicleInfo,
+    { [styles.vehiclePropertiesComparable]: vehicleComponentName === 'comparable' },
+    { [styles.vehiclePropertiesLanding]: vehicleComponentName === 'landing' },
+    { [styles.vehiclePropertiesMain]: vehicleComponentName === 'main' },
+    { [styles.vehiclePropertiesSearch]: vehicleComponentName === 'search' },
+    // ADV-88: mark a plug-in SRL card so its "good price" underline can be dropped on mobile.
+    { [styles.searchPluginInfo]: isPluginHybrid && vehicleComponentName === 'search' },
+    { [styles.vehiclePropertiesFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePropertiesMyVehicles]: vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePropertiesRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehiclePropertiesIsAlternative]: combineRefAlternative },
+  );
+
+  const conditionForRating = vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently';
+
+  return (
+    <>
+      {React.createElement(linkTag, {
+        children: (
+        <>
+          {vehicleComponentName === 'comparable' || vehicleComponentName === 'recently' ? renderProperty(getMainPropertiesForComparableCars) : ''}
+          {vehicleComponentName === 'main' ? renderProperty(getMainPropertiesForLandingCars) : ''}
+          {vehicleComponentName === 'landing' ? (
+            <>
+              <Visible xs sm md>
+                {renderProperty(getMainPropertiesForSRL, vehicleComponentName)}
+              </Visible>
+              <Hidden xs sm md>
+                {renderProperty(getMainPropertiesForLandingCars, vehicleComponentName)}
+              </Hidden>
+            </>
+          ) : ''}
+          {vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' ? renderProperty(getMainPropertiesForSRL, vehicleComponentName): ''}
+          
+          {vehicleComponentName === 'favorite' ? (
+            <>
+              <Visible xs sm md>
+                {renderProperty(getMainPropertiesForComparableCars)}
+              </Visible>
+              <Hidden xs sm md>
+                {renderProperty(getMainPropertiesForFavorite, vehicleComponentName)}
+              </Hidden>
+            </>
+          ) : ''}
+          <PriceRating
+            t={t}
+            i18nPrefix={i18nPrefixForPriceRating ? `${i18nPrefixForPriceRating}priceRating.` : 'priceRating.'}
+            rating={getPriceRating(currentSalesPrice, mlCurrentSalesPricePredicted)}
+            className={`${styles.priceRating} ${conditionForRating ? styles.priceRatingSRL : ''}`}
+            classLabel={conditionForRating ? styles.priceRatingLabelSRL : ''}
+            classSegmentWrapper={conditionForRating ? styles.priceRatingSegmentWrapSRL : ''}
+          />
+        </>
+      ),
+        ...routeObj,
+        className: wrapClasses,
+        // ADV-116: opening a CDP from a card defaults to the Financing tab.
+        onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+        href: url,
+        target,
+        rel
+      })}
+    </>
+  );
+};
+
+export default VehicleInfo;