@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleSmallCard/VehicleSmallCard.tsx

@@ -0,0 +1,448 @@
+import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import getCardDecoratedProps from '../../vehiclesProps/decoratedLightProps';
+import LazyLoad from 'react-lazyload';
+import withLabel from '../withLabel/withLabel';
+import withStats, { IStatsWrapperProps } from '../withStats/withStats';
+import Image from '../Image/Image';
+import IconSVG from '../../iconsvg/IconSVG';
+import VehicleSlider from '../VehicleSlider/VehicleSlider';
+import VehicleSliderForSRL from '../VehicleSlider/VehicleSliderForSRL';
+import VehicleTitle from './VehicleData/VehicleTitle/VehicleTitle';
+import SeoText from './SeoText/SeoText';
+import VehicleInfo from './VehicleData/VehicleInfo/VehicleInfo';
+import VehiclePrice from './VehicleData/VehiclePrice/VehiclePrice';
+import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../constants/common';
+import {
+  IVehicleInfo,
+  IPrice,
+  IVehicleLocation,
+  IVehicleTitleProps,
+  IVehicleSliderProps,
+  IVehicleSliderForSRLProps,
+  IVehicleCompareProps
+} from '../../types/types';
+import { vehicleProps } from '../../locales/legacy/data';
+import styles from './VehicleSmallCard.styl';
+
+const DecoratedSlider = withLabel(withStats(VehicleSlider));
+const DecoratedSliderForSRL = withStats(VehicleSliderForSRL);
+const ImageWithStats = withStats(Image);
+
+interface IVehicleSmallCardProps {
+  t?: (key: string, options?: object) => string;
+  i18nPrefixForPriceRating?: string;
+  language?: string;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  isTop?: boolean;
+  isDealerSuperAdmin?: boolean;
+  isReferenceSearch?: boolean;
+  dashboardButtonText?: string;
+  showNewLabel?: boolean;
+  disableDownPaymentLocalStorage?: boolean;
+  CircularProgressbar?: any;
+  slider?: IVehicleSliderProps | IVehicleSliderForSRLProps;
+  stats?: IStatsWrapperProps;
+  title?: IVehicleTitleProps;
+  info?: IVehicleInfo;
+  location?: IVehicleLocation;
+  compareProps?: IVehicleCompareProps;
+  environmentEmissions?: object;
+  consumption?: object;
+  engineData?: object;
+  isCarInFavorite?: boolean;
+  offer?: object;
+  price?: IPrice;
+  seoText?: string;
+  classButton?: string;
+  mainImageId?: string;
+  target?: string;
+  rel?: string;
+  crawledAt?: string;
+  modificationDate?: string;
+  baseUrl?: string;
+  offerSource?: string;
+  priceSubMtl?: string | null;
+  ownerName?: string;
+  className?: string;
+  id?: string;
+  linkTag?: string;
+  src?: string;
+  url?: string;
+  iconName?: string;
+  children?: ReactNode;
+  showSlider?: boolean;
+  showOfferBtn?: boolean;
+  hasInteriorExteriorPhoto?: boolean;
+  showCompareCheckboxes?: boolean;
+  showFavoriteStar?: boolean;
+  minimizeData?: boolean;
+  onContainerClick?: (event?: any) => void;
+  renderIDInfo?: () => React.ReactNode;
+  renderVehicleStatus?: () => React.ReactNode;
+  onFavoriteClick?: (event?: any) => void;
+  onDetailsClick(id: string): void;
+  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
+  isAlternative?: boolean;
+  typeAlternative?: string;
+  index?: number;
+}
+
+const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
+  const {
+    t = (phrase: string) => _get(vehicleProps(props), phrase.replace(':', '.'), phrase),
+    isTop,
+    slider,
+    vehicleComponentName,
+    i18nPrefixForPriceRating,
+    stats,
+    compareProps,
+    title,
+    info,
+    location,
+    consumption,
+    environmentEmissions,
+    isReferenceSearch,
+    showCompareCheckboxes,
+    CircularProgressbar,
+    engineData,
+    offer,
+    price,
+    seoText,
+    showNewLabel,
+    disableDownPaymentLocalStorage,
+    linkTag = 'a',
+    language,
+    className,
+    url,
+    target,
+    rel,
+    priceSubMtl,
+    onContainerClick,
+    onAddOfferToMainSlideClick,
+    isDealerSuperAdmin,
+    mainImageId,
+    onFavoriteClick,
+    isCarInFavorite,
+    onDetailsClick,
+    renderIDInfo,
+    renderVehicleStatus,
+    src,
+    crawledAt,
+    modificationDate,
+    baseUrl,
+    offerSource,
+    ownerName,
+    id,
+    children,
+    iconName,
+    showSlider,
+    classButton,
+    hasInteriorExteriorPhoto,
+    dashboardButtonText,
+    showOfferBtn = false,
+    showFavoriteStar = true,
+    minimizeData = false,
+    isAlternative = false,
+    typeAlternative,
+    index
+  } = props;
+
+  const combineRefAlternative = isAlternative || isReferenceSearch;
+
+  // ADV-88: on the narrow landing/main recommendation cards the long plug-in consumption line
+  // doesn't fit the slim `info` column — render it as its own full-width row below the price
+  // block (under "Zum Angebot") instead, and suppress it inside VehicleInfo to avoid duplication.
+  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
+  // line — externalise it to a full-width row so it doesn't overflow the narrow info column. 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 cardFuel = consumption ? (consumption as any).fuel : undefined;
+  const isPlugin = cardFuel === 'selector_fuel_hybridElectricalDiesel'
+    || cardFuel === 'selector_fuel_hybridElectricalPetrol';
+  const externalizeConsumption = isPlugin
+    && (vehicleComponentName === 'landing' || vehicleComponentName === 'main'
+      || vehicleComponentName === 'search' || vehicleComponentName === 'comparable'
+      || vehicleComponentName === 'favorite');
+  let pluginConsumptionNode: ReactNode = null;
+  if (externalizeConsumption) {
+    const decoCar = {
+      consumption,
+      environmentEmissions,
+      engineData,
+      mainData: { condition: _get(info, 'condition') }
+    };
+    const deco = getCardDecoratedProps(decoCar, t, language) as any;
+    pluginConsumptionNode = _get(deco, 'consumptionCombinedAlternateView.value', null);
+  }
+
+  const label = {
+    labelVisible: isTop,
+    labelWrapperClassName: styles.labelWrapper
+  };
+
+  const wrapperClassName = classnames(
+    styles.vehicle,
+    { [styles.vehicleWrapLanding]: vehicleComponentName === 'landing' },
+    { [styles.vehicleWrapMain]: vehicleComponentName === 'main' },
+    { [styles.vehicleWrapSearch]: vehicleComponentName === 'search' },
+    { [styles.vehicleWrapComparable]: vehicleComponentName === 'comparable' },
+    { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
+    { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehicleWrapNewPlugin]: externalizeConsumption },
+    { [styles.topVehicle]: isTop },
+    { [styles.disableBorder]: minimizeData },
+    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 },
+    className
+  );
+
+  const decoratedSliderProps = {
+    t,
+    id,
+    hasInteriorExteriorPhoto,
+    ...label,
+    ...stats,
+    ...slider,
+    price,
+    showNewLabel,
+    CircularProgressbar,
+    isReferenceSearch,
+    isAlternative,
+    typeAlternative,
+    showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
+  };
+
+  const favoriteProps = {
+    ...title,
+    id,
+    vehicleComponentName,
+    renderVehicleStatus,
+    isCarInFavorite,
+    onFavoriteClick,
+    showFavoriteStar,
+    combineRefAlternative
+  };
+
+  const routeObj = linkTag !== 'a'
+    ? { to: { pathname: url, state: { mainImageId, mainImageUrl: src, carId: id, isSavedCheckout: showOfferBtn, ...title } } }
+    : '';
+
+  const vehicleInfoProps = {
+    t,
+    combineRefAlternative,
+    environmentEmissions,
+    i18nPrefixForPriceRating,
+    vehicleComponentName,
+    location,
+    consumption,
+    offer,
+    language,
+    linkTag,
+    routeObj,
+    url,
+    target,
+    rel,
+    engineData,
+    suppressConsumption: externalizeConsumption,
+    ...price,
+    ...info
+  };
+
+  const vehiclePriceProps = {
+    t,
+    id,
+    url,
+    target,
+    rel,
+    iconName,
+    dashboardButtonText,
+    vehicleComponentName,
+    classButton,
+    linkTag,
+    priceSubMtl,
+    onAddOfferToMainSlideClick,
+    isDealerSuperAdmin,
+    onDetailsClick,
+    mainImageId,
+    routeObj,
+    showOfferBtn,
+    combineRefAlternative,
+    typeAlternative,
+    isAlternative,
+    showCompareCheckboxes,
+    // ADV-88: hide the "monatlich z.B." price-column header on exactly the cards that show
+    // the externalised consumption row (new plug-in hybrids) so the price column rises.
+    suppressMonthlyFrom: externalizeConsumption && !!pluginConsumptionNode,
+    ...price,
+    ...compareProps
+  };
+
+  const lazyLoadProps = {
+    once: true,
+    offset: 500
+  };
+
+  const imageProps = {
+    src,
+    width: '100%',
+    ratioW: 4,
+    ratioH: 3
+  };
+
+  const statsProps = {
+    t,
+    price,
+    showNewLabel,
+    showDownPayment: !!(offer as any)?.showDownPayment,
+    disableDownPaymentLocalStorage,
+    ...stats
+  };
+
+  const linkBaseUrl = (e: MouseEvent<HTMLImageElement>) => {
+    e.preventDefault();
+    if (baseUrl) window.open(baseUrl, '_blank');
+  };
+  const showComponentLikeSlider = vehicleComponentName === 'search' ||
+                                  vehicleComponentName === 'myVehicles' ||
+                                  vehicleComponentName === 'favorite' ||
+                                  vehicleComponentName === 'recently';
+  return (
+    <section className={wrapperClassName} onClick={onContainerClick} id={id}>
+      <>
+        {createElement(linkTag, {
+          children: <VehicleTitle {...favoriteProps} />,
+          ...routeObj,
+          target,
+          rel,
+          className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          href: url
+        })}
+
+        {createElement(linkTag, {
+          children: (
+            <>
+              {showSlider ? (
+                <>
+                  {showComponentLikeSlider ? (
+                    <>
+                      <DecoratedSliderForSRL {...decoratedSliderProps} />
+                      {renderIDInfo ? renderIDInfo() : null}
+                      {combineRefAlternative && (
+                        <div className={styles.wrapAlternativeData}>
+                          <div>
+                            {offerSource || ownerName ? (
+                              <>
+                                <IconSVG className={styles.svgIcon} name='linkAlternative' />
+                                <span onClick={(e: MouseEvent<HTMLImageElement>) => linkBaseUrl(e)}>
+                                  {!typeAlternative ? ownerName : t(`cbd:${offerSource}`)}
+                                </span>
+                              </>
+                            ) : ''}
+                          </div>
+                          {crawledAt || modificationDate ? (
+                            <div>
+                              <IconSVG className={styles.svgIcon} name='lastCrawledAt' />
+                              <span>
+                                {!typeAlternative ? modificationDate : crawledAt}
+                              </span>
+                            </div>
+                          ) : ''}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <figure className={styles.figure}>
+                      <DecoratedSlider {...decoratedSliderProps} />
+                    </figure>
+                  )}
+                </>
+              ) : (
+                <LazyLoad {...lazyLoadProps}>
+                  <ImageWithStats {...imageProps} {...statsProps} />
+                </LazyLoad>
+              )}
+            </>
+          ),
+          ...routeObj,
+          target,
+          rel,
+          className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
+          onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
+          href: url
+        })}
+        <VehicleInfo {...vehicleInfoProps} />
+        <VehiclePrice {...vehiclePriceProps} />
+        {externalizeConsumption && pluginConsumptionNode ? (
+          <div className={styles.gridAreaConsumption}>{pluginConsumptionNode}</div>
+        ) : null}
+        {seoText ? (
+          <a className={`${styles.redirectClassLink} ${styles.gridAreaSeoText}`} href={url}>
+            <SeoText seoText={seoText} />
+          </a>
+          ) : null
+        }
+        {children}
+      </>
+    </section>
+  );
+};
+
+VehicleSmallCard.defaultProps = {
+  vehicleComponentName: 'landing',
+  isTop: false,
+  showSlider: false,
+  isDealerSuperAdmin: false,
+  showCompareCheckboxes: false,
+  priceSubMtl: null,
+  slider: {},
+  stats: {},
+  title: {},
+  info: {},
+  crawledAt: 'N/A',
+  baseUrl: '',
+  typeAlternative: '',
+  offerSource: '',
+  src: PLACEHOLDER_IMAGE_SMALL_URL,
+  environmentEmissions: null,
+  language: 'en',
+  consumption: null,
+  showNewLabel: false,
+  isCarInFavorite: false,
+  onContainerClick: () => { },
+  onDetailsClick: () => { }
+};
+
+// export default VehicleSmallCard;
+export default memo(VehicleSmallCard, (props, nextProps) => { // shouldComponentUpdate
+  const {
+    t,
+    price: {
+      financing: { monthlyInstallment, annualMileage, withFinalInstallment },
+      leasing: { monthlyInstallment: lMonthlyInstallment }
+    },
+    stats: { statsData },
+    isCarInFavorite,
+    compareProps,
+    children,
+    slider: {
+      images
+    }
+  } = props;
+
+  return t                    === nextProps.t
+    && monthlyInstallment     === nextProps.price.financing.monthlyInstallment
+    && annualMileage          === nextProps.price.financing.annualMileage
+    && withFinalInstallment   === nextProps.price.financing.withFinalInstallment
+    && lMonthlyInstallment    === nextProps.price.leasing.monthlyInstallment
+    && isCarInFavorite        === nextProps.isCarInFavorite
+    && statsData              === nextProps.stats.statsData
+    && _get(compareProps, 'toCompare') === _get(compareProps, 'nextProps.toCompare')
+    && children               === nextProps.children
+    && images                 === nextProps.slider.images;
+});

package/compat/index.ts

@@ -0,0 +1,77 @@
+// @bytebrand/fe-ui-core-autobahn/compat — DESIGN-NEUTRAL LEGACY COMPONENTS,
+// moved verbatim out of @bytebrand/fe-ui-core before its deletion.
+//
+// These are NOT md3 primitives: they render their own markup with co-located
+// .styl (compiled by each consumer's bundler, CSS-modules, no theme injection)
+// and have NO @mui dependency. They exist so the last MUI-free pieces of the
+// legacy design keep one single source. New code should use the md3 kit from
+// the package root (`ui/`, `cards/`, …) instead.
+//
+// NOTE: deliberately NOT re-exported from the package root index.ts — several
+// names (FormCheckbox, Tooltip, …) would clash with the md3 primitives in ui/.
+// Import via `@bytebrand/fe-ui-core-autobahn/compat`.
+
+export { default as Loader } from './Loader/Loader';
+export { default as Image } from './Image/Image';
+export { default as FormattedNumber } from './FormattedNumber/FormattedNumber';
+export { default as VehicleFormattedPrice } from './VehicleFormattedPrice/VehicleFormattedPrice';
+export { default as InfoBlockWrapper } from './InfoBlockWrapper/InfoBlockWrapper';
+export { default as ContactInfo } from './ContactInfo/ContactInfo';
+export { default as ButtonOld } from './ButtonOld/Button';
+
+export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as FormCheckbox } from './Checkbox/FormCheckbox';
+export { default as Tooltip } from './Tooltip/Tooltip';
+export { default as Radio } from './Radio/Radio';
+// legacy alias kept from fe-ui-core's common barrel (RadioButton === Radio)
+export { default as RadioButton } from './Radio/Radio';
+export { default as RadioGroup } from './Radio/RadioGroup';
+
+export { default as AdvantageItem } from './AdvantageItem/AdvantageItem';
+export { default as ImagesSet } from './ImagesSet/ImagesSet';
+export { default as Usp } from './Usp/Usp';
+export { default as CustomerQuote } from './CustomerQuote/CustomerQuote';
+export { default as CustomerQuotesSlider } from './CustomerQuotesSlider/CustomerQuotesSlider';
+export { default as PriceRating } from './PriceRating/PriceRating';
+export { default as PriceRatingDetailed } from './PriceRatingDetailed/PriceRatingDetailed';
+export { default as PricingToolBlock } from './PricingToolBlock/PricingTool';
+export { default as ServiceBlockItem } from './ServiceBlockItem/ServiceBlockItem';
+export { default as VehicleFirstInfoBlock } from './FirstInfoBlock/FirstInfoBlock';
+export { default as SkeletonItem } from './SkeletonItem/SkeletonItem';
+export { default as TabPanel } from './TabPanel/TabPanel';
+
+// legacy composites moved verbatim (their MUI leaves swapped to the md3
+// adapters below — see each component's header).
+export { default as VehicleSmallCard } from './VehicleSmallCard/VehicleSmallCard';
+export { default as VehicleDetailedSlider } from './VehicleDetailedSlider/VehicleDetailedSlider';
+export { default as VehicleDetailedSidebar } from './VehicleDetailedSidebar/VehicleDetailedSidebar';
+export { default as RateSearchWidget } from './RateSearchWidget/RateSearchWidget';
+export { default as RateSearchValue } from './RateSearchValue/RateSearchValue';
+export { default as AccardionSection } from './AccardionSection/AccardionSection';
+export { default as OfferDetailedSection } from './OfferDetailedSection/OfferDetailedSection';
+export { default as OfferPanel } from './OfferPanel/OfferPanel';
+export { default as OfferPeriod } from './OfferPanel/OfferPeriod/OfferPeriod';
+export { default as MuiOfferPeriod } from './OfferPanel/MuiOfferPeriod/MuiOfferPeriod';
+export { default as RangeGroup } from './OfferPanel/RangeGroup/RangeGroup';
+export { default as OfferCheckboxGroup } from './OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup';
+export { default as CheckboxContainer } from './OfferPanel/OfferCheckboxGroup/CheckboxContainer';
+export { default as CookieModal } from './CookieModal/CookieModal';
+export { default as ExpansionPanel } from './ExpansionPanel/ExpansionPanel';
+
+// image-settings admin tooling (fe-main ImageSettingsPage only)
+export * from './ImageSettings';
+
+// ── md3 ADAPTERS (not verbatim legacy) — drop-in replacements for the deleted
+// MUI form controls, rendering the md3 `.mfield`/Dropdown markup instead. ──
+export { default as MdField } from './MdField/MdField';
+export { default as MdSelect } from './MdSelect/MdSelect';
+export { default as MdCheckbox } from './MdCheckbox/MdCheckbox';
+export { default as MdTooltip } from './MdTooltip/MdTooltip';
+export { default as MdTabs } from './MdTabs/MdTabs';
+export { default as MdSwitch } from './MdSwitch/MdSwitch';
+export { default as MdAccordionGroup } from './MdAccordionGroup/MdAccordionGroup';
+export { default as Button } from './Button/Button';
+export { default as Range } from './Range/Range';
+// TimePicker is the legacy scheduling widget kept verbatim; its two inner
+// selects now render through MdSelect (its only MUI dependency).
+export { default as TimePicker } from './TimePicker/TimePicker';

package/compat/legacy-theme/mixins.styl

@@ -0,0 +1,93 @@
+@import './theme.styl'
+
+// to prevent applying both "up" and "down" media queries
+// when device width is equal to exact max-width && min-width value
+// https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// (keep in mind that solution from CSS spec is not yet widely supported)
+// 0.02px offset is a solution from Bootstrap 4
+$upperBoundOffset = 0.02
+
+container(padding = false)
+  width: 100%
+  max-width: 1100px
+  margin: 0 auto
+  padding: 0
+  if padding
+    padding: 0 7.5px
+    box-sizing: border-box
+
+truncate()
+  white-space nowrap
+  overflow hidden
+  -ms-text-overflow ellipsis
+  text-overflow ellipsis
+
+borderRadius(color = rgba(#000, .1))
+  border-top: 1px solid color;
+  border-bottom: 1px solid color;
+
+  +media-phone-up()
+    border: 1px solid color;
+    border-radius: 2px;
+
+strikethrough()
+  position absolute
+  content ''
+  top: 50%
+  left: 0
+  display: inline-block
+  width: 100%
+  height: 1px
+  background-color $grey-3
+  transform: rotate(170deg)
+
+media-phone-up()
+  @media all and (min-width: $phoneMax )
+    {block}
+
+media-phone-only()
+  @media all and (max-width: $phoneMax - $upperBoundOffset)
+    {block}
+
+media-tablet-up()
+  @media all and (min-width: $tablet)// and (min-height: $tablet)// -- set mobile layout for high resolution in a landscape mode ACF-3974
+    {block}
+
+media-tablet-up-rectangular()
+  @media all and (min-width: $tablet)
+    {block}
+
+// media-tablet-down()
+//   @media all and (max-width: $tablet - $upperBoundOffset)
+//     {block}
+media-tablet-down()
+  @media only screen and (max-device-width: $phoneMaxLandscape) and (max-device-height: $phoneMaxLandscape) 
+    {block}
+
+media-tablet-landscape-up()
+  @media all and (min-width: $tabletLandscape)
+    {block}
+
+media-tablet-landscape-down()
+  @media all and (max-width: $tabletLandscape - $upperBoundOffset)
+    {block}
+
+media-desktop-up()
+  @media all and (min-width: $desktop)
+    {block}
+
+media-desktop-down()
+  @media all and (max-width: $desktop - $upperBoundOffset)
+    {block}
+
+media-big-desktop-up()
+  @media all and (min-width: $desktopBig)
+    {block}
+
+media-landscape()
+  @media (orientation: landscape)
+    {block}
+
+media-portrait()
+  @media (orientation: portrait)
+    {block}

package/compat/legacy-theme/priceReviewColors.styl

@@ -0,0 +1,12 @@
+
+$priceReviewColors = {
+  noRating: rgba(76, 78, 100, 0.22)
+  darkBackground: rgba(76, 78, 100, 0.22)
+  highPrice: rgba(226, 108, 0, 1)
+  increasedPrice: rgba(237, 157, 55, 1)
+  fairPrice: rgba(173, 208, 66, 1)
+  goodPrice: rgba(102, 212, 102, 1)
+  topPrice: rgba(31, 193, 31, 1)
+}
+
+

package/compat/legacy-theme/slider.global.styl

@@ -0,0 +1,5 @@
+// Verbatim copy of the legacy fe-ui-core source/theme/slider.global.styl:
+// the slick-carousel base + theme CSS the legacy slider components rely on.
+// Imported from consumer .styl files (e.g. fe-landing VehiclePromoSlider.styl).
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';