@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleDetailedSidebar/partials/Price.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import { IVehicleDetailedSidebarPriceProps } from '../../../types/types';
+import TabsComponent from '../../MdTabs/MdTabs';
+import styles from './Price.styl';
+
+const Price: React.FunctionComponent<IVehicleDetailedSidebarPriceProps> = ({
+  priceTabActiveIndex,
+  isSticky,
+  onTabPriceSelect,
+  tabsTitles,
+  isPriceSticky
+}) => {
+  const tabsContainerPriceClassName = classnames(
+    styles.tabsContainerPrice,
+    { [styles.priceFixed]: isSticky },
+    { [styles.stickyShow]: isPriceSticky }
+  );
+
+  const tabsProps = {
+    tabsTitles,
+    onTabPriceSelect,
+    priceTabActiveIndex,
+    tabContentClassName: styles.tabContent
+  };
+
+  return (
+    <div className={tabsContainerPriceClassName}>
+      <TabsComponent {...tabsProps} />
+    </div>
+  );
+};
+
+Price.defaultProps = {
+  isSticky: false,
+  priceTabActiveIndex: 0,
+  isPriceSticky: false
+};
+
+export default Price;

package/compat/VehicleDetailedSidebar/partials/PriceContent.styl

@@ -0,0 +1,124 @@
+@import '../../legacy-theme/mixins.styl';
+
+.newFinancingPriceWrapper
+  width: 159px
+  display: flex
+  align-items: flex-start;
+  color: $lightGreen;
+
+  [class*="VehicleFormattedPrice__large"]
+    font-size: 60px;
+    display flex;
+    line-height: .8;
+    margin 8px 0 0 10px;
+  [class^="VehicleFormattedPrice__decimals"], [class^="VehicleFormattedPrice__unit"]
+    font-size: 16px !important;
+    transform: none !important;
+
+.tabContentPaddingForBuy
+  .newFinancingPriceWrapper
+    [class*="VehicleFormattedPrice__large"]
+      margin-left: 0;
+    +media-phone-only()
+      [class*="VehicleFormattedPrice__large"]
+        margin-left: 3px;
+
+
+
+
+.tabContentPadding
+  padding: 10px 10px 10px 10px;
+  flex-direction: row
+  justify-content: space-between
+  display flex;
+
+.financingPriceItem
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+
+.oldFinancingPriceWrapper
+  width: 100%
+  display: flex
+  white-space: nowrap;
+  font-size: 12px
+
+  & > span
+    color: rgba($grey-3, .75);
+
+  [class*="VehicleFormattedPrice__old"]
+    font-size: inherit;
+    flex-shrink: 0;
+
+.priceRating
+  [class^=PriceRating__label]
+    font-size: 10px;
+
+.financingUnits
+  color: rgba($grey-3, .8);
+  padding-left: 5px;
+
+.financingUnits.financingUnitsNoSale
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+.priceInfo
+  display: flex
+  align-self: flex-end
+  flex-direction: column
+  justify-content: space-between
+  flex-shrink: 0
+
+.infoIcon
+  margin-right: 10px
+  width: 14px
+  height: auto
+
+.priceInfoLabel
+  display flex
+  align-items center
+  position: relative
+  color: $primary
+  font-weight: 700
+  font-size: 12px
+  cursor: pointer
+  white-space: nowrap
+  margin-top: 10px
+
+  span
+    line-height: 1;
+
+.priceInfoDetails
+  font-size: inherit;
+  margin-left: 8px
+  color: rgba($grey-3, .75);
+  white-space: nowrap
+
+.prefixPrice
+  font-size: 14px;
+  color: $lightGreen;
+  margin-top: 8px;
+
+.arrowDownIcon
+  width 12px
+  fill: $skyBlue
+  margin-left: 10px
+  pointer-events: none;
+
+.arrowUpIcon
+  transform: rotate(180deg);
+
+.wrapper
+  +media-tablet-landscape-up()
+   padding-right: 15px;
+
+.priceFontSizeSmall
+  .priceInfoLabel
+    margin-top:8px!important 
+  
+
+.tabContentPaddingForBuy.priceFontSizeSmall
+  .financingPriceItem
+      display: flex;

package/compat/VehicleDetailedSidebar/partials/PriceContent.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import IconSVG from '../../../iconsvg/IconSVG';
+import { IPriceContentProps } from '../../../types/types';
+import styles from './PriceContent.styl';
+import VehicleFormattedPrice from '../../VehicleFormattedPrice/VehicleFormattedPrice';
+import PriceRating from '../../PriceRating/PriceRating';
+import RequestOffer from '../../OfferRequestButtonWrapper/OfferRequestButtonWrapper';
+import { getFormattedPrice } from '../../../utils/index';
+
+const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
+  t,
+  car,
+  detailsText,
+  prefixPrice,
+  OfferRequestButtonWrapper,
+  isStrikeShown,
+  isBuy,
+  oldMonthlyInstallment,
+  activeTab,
+  monthlyInstallment,
+  postfix,
+  // vatRate,
+  priceRating,
+  offerBlockOpen,
+  onAdjustRateClick,
+  OfferBlockComponent,
+  priceTabActiveIndex,
+  offerBlockProps
+}) => {
+  const priceRatingProps = {
+    t,
+    rating: priceRating,
+    darkBackground: true,
+    i18nPrefix: 'priceReview.',
+    className: styles.priceRating
+  };
+
+  const requestOfferProps = {
+    t,
+    car,
+    detailsText,
+    OfferRequestButtonWrapper,
+    priceTabActiveIndex,
+    isAdditionalOption: true,
+    onShowOfferDetails: offerBlockProps.onShowOfferDetails
+  };
+  const priceFontSize: string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' : 'large') : '';
+
+  const tabContentPaddingClassName = classnames(
+    styles.tabContentPadding,
+    { [styles.tabContentPaddingForBuy]: isBuy },
+    { [styles.priceFontSizeSmall]: priceFontSize === 'small' }
+  );
+
+  return (
+    <>
+      <div className={tabContentPaddingClassName}>
+        <span className={styles.financingPriceItem}>
+          <div className={styles.oldFinancingPriceWrapper}>
+            {isStrikeShown ? (
+              <>
+                <span>{t('sidebar.insteadOf')}&nbsp;</span>
+                <VehicleFormattedPrice
+                  price={oldMonthlyInstallment}
+                  isOld={true}
+                  disableStyles={true}
+                  className={styles.oldFinancingPrice}
+                  toRound={false}
+                  postfix={priceTabActiveIndex === 2 ? '2' : ''}
+                  numbersAfterDot={0}
+                />
+              </>
+            ) : null}
+            {isBuy ? (
+              <>
+                {/* {!!vatRate && <div className={styles.priceInfoDetails}>{t('sidebar.vat', { vatRate })}</div>} */}
+              </>
+            ) : (
+              <div className={`${styles.financingUnits} ${isStrikeShown ? '' : styles.financingUnitsNoSale}`}>
+                {t('sidebar.monthly')} {/* {!!vatRate && t('sidebar.vat', { vatRate })} */}
+              </div>
+            )}
+          </div>
+
+          {Number.isFinite(monthlyInstallment) ? (
+            <div className={styles.newFinancingPriceWrapper}>
+              {prefixPrice && <span className={styles.prefixPrice}>{t(`sidebar.financingBlock.${prefixPrice}`)}</span>}
+              <VehicleFormattedPrice
+                price={monthlyInstallment}
+                isNew={isStrikeShown ? true : false}
+                toRound={false}
+                postfix={postfix}
+                numbersAfterDot={0}
+                size='large'
+                dynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy') ? 'large' : 'small'}
+              />
+            </div>
+          ) : null}
+        </span>
+        <div className={styles.wrapper}>
+          <PriceRating {...priceRatingProps} />
+          <span className={styles.priceInfo}>
+            <span className={styles.priceInfoLabel} onClick={onAdjustRateClick}>
+              <IconSVG
+                name='infoIcon'
+                className={styles.infoIcon}
+                customDimensions
+              />
+              <span>{priceTabActiveIndex === 2 ? t('sidebar.serviceProducts') :  t('sidebar.adjustRate')}</span>
+              <IconSVG name='menuArrow' className={`${styles.arrowDownIcon} ${offerBlockOpen ? styles.arrowUpIcon : ''}`} customDimensions />
+            </span>
+          </span>
+        </div>
+      </div>
+      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />}
+      <RequestOffer {...requestOfferProps} />
+    </>
+  );
+};
+
+PriceContent.defaultProps = {
+  isBuy: false,
+  offerBlockOpen: false
+};
+
+export default PriceContent;

package/compat/VehicleDetailedSidebar/partials/Properties.styl

@@ -0,0 +1,58 @@
+@import '../../legacy-theme/mixins.styl';
+
+.property
+  flex-basis: 50%
+  width: 50%
+  box-sizing: border-box
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  margin: 0
+  text-transform: none
+  padding: 7px 3px;
+  white-space: pre-line;
+  border-bottom: 0;
+
+  &:nth-child(1),
+  &: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
+  flex-wrap: wrap
+  justify-content: space-between
+  font-size: 12px
+  width: 100%
+
+.detailsItemFirstLine
+  width: 47%
+  padding-top: 7px
+  padding-bottom: 20px
+  border-bottom: 1px solid $grey-e
+
+.detailsItemLastLine
+  width: 47%
+  padding-top: 20px
+
+.detailsTitle
+  font-weight: bold
+  font-size: 12px
+  margin-bottom: 5px;
+
+.detailsContent
+  display: block
+  line-height: 1.5em
+
+.tabContentPadding
+  padding: 10px 10px 10px 10px;
+  flex-direction: row
+  justify-content: space-between
+  display flex;
+  flex-wrap: wrap
+
+.tabContentOverviewPadding
+  padding: 10px 0px

package/compat/VehicleDetailedSidebar/partials/Properties.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import _get from 'lodash/get';
+import { IPropertiesProps, ICarPropElement } from '../../../types/types';
+import { getActualHighlights } from '../../../constants/highlights';
+import TabsComponent from '../../MdTabs/MdTabs';
+import { addPrefixToKeys } from '../../../utils/CommonUtils';
+import { getOverviewDetails } from '../../../vehiclesProps/vehicleDetails';
+import VehicleProperty from '../../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
+import styles from './Properties.styl';
+
+const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decoratedProps, isAlternative }) => {
+  const [priceTabActiveIndex, setNewIndex] = useState(0);
+
+  const onTabPriceSelect = (_: React.ChangeEvent<{}>, priceTabActiveIndex: number) => {
+    setNewIndex(priceTabActiveIndex);
+  };
+
+  const renderPropsBlock = (data: ICarPropElement[]) => {
+    return (
+      data.map((prop, i) => {
+        return (
+          <VehicleProperty
+            key={i}
+            classNameIcon={styles.propertyIcon}
+            description={prop.description}
+            icon={prop.icon || 'no-image'}
+            className={styles.property}
+          />
+        );
+      })
+    );
+  };
+
+  const renderHighlights = () => {
+    const actualHighlights: ICarPropElement[] = getActualHighlights(car, t) || [];
+    const MAX_HIGHLIGHTS = 12;
+
+    return !!actualHighlights.length
+    ? renderPropsBlock(actualHighlights.slice(0, MAX_HIGHLIGHTS))
+    : <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 equipmentsObj = {
+      ...addPrefixToKeys(car.lights, 'lights'),
+      ...addPrefixToKeys(car.multimedia, 'multimedia'),
+      ...addPrefixToKeys(car.seats, 'seats')
+    };
+
+    const equipmentsArr = Object.keys(equipmentsObj)
+      .filter(key => !!equipmentsObj[key])
+      .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.
+    return (
+      <div className={styles.details}>
+        {visibleSections.map(({ title, lines }, 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>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  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 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} />
+          ))}
+        </div>
+      )
+    },
+    {
+      title: 'highlights',
+      children: <div className={styles.tabContentPadding}>{renderHighlights()}</div>
+    },
+    {
+      title: 'details',
+      children: <div className={styles.tabContentPadding}>{renderDetails()}</div>
+    }
+  ];
+
+  const tabsProps = {
+    t,
+    isAlternative,
+    tabsTitles,
+    onTabPriceSelect,
+    priceTabActiveIndex
+  };
+
+  return (
+    <TabsComponent {...tabsProps} />
+  );
+};
+
+export default Properties;

package/compat/VehicleDetailedSidebar/partials/Title.styl

@@ -0,0 +1,35 @@
+@import '../../legacy-theme/mixins.styl';
+
+.titleSection
+  padding-bottom: 15px
+  overflow hidden
+  display flex
+  flex-wrap: wrap;
+  position relative;
+  width: 100%
+  border-bottom: 1px solid $grey-5f
+
+.title
+  font-size: 24px
+  font-weight: 700
+  text-transform: capitalize
+  margin-bottom: 3px;
+  color: rgba(#000, 83%)
+  padding-right: 30px;
+
+.titleDescription
+  font-size: 16px
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.63);
+  width: 100%;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+.starButton
+  margin-left: auto;
+  position absolute;
+  top: 0;
+  right: 0;
+

package/compat/VehicleDetailedSidebar/partials/Title.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Hidden } from 'react-grid-system';
+import { getPowerLabel } from '../../../vehiclesProps/decoratedProps';
+import StarButton from '../../StarButton/StarButton';
+import { IVehicleDetailedSidebarTitleProps } from '../../../types/types';
+import styles from './Title.styl';
+
+const Title: React.FunctionComponent<IVehicleDetailedSidebarTitleProps> = ({ make, model, subModel, powerKW, powerPS, isCarInFavorite, onCarFavorite, carId }) => {
+  const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
+  const onCarFavoriteClick = (event: React.MouseEvent<HTMLElement>, id: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onCarFavorite(event, id);
+  };
+
+  return (
+    <Hidden xs sm md>
+      <div className={styles.titleSection}>
+        <div className={styles.title}>{make} {model}</div>
+        <div className={styles.titleDescription}>{subModel}</div>
+        <div className={styles.titleDescription}>{powerKWpowerPS}</div>
+        <StarButton
+          onClick={e => onCarFavoriteClick(e, carId)}
+          isFavorite={isCarInFavorite}
+          className={styles.starButton}
+        />
+      </div>
+    </Hidden>
+  );
+};
+
+export default Title;