@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -1,299 +1,299 @@
-import * as React from 'react';
-import styles from './VehiclePrice.styl';
-import classnames from 'classnames';
-import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
-import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../types/types';
-import { isMobileOnly } from 'react-device-detect';
-import Button from '../../../Button/Button';
-import CheckboxMaterial from '../../../MdCheckbox/MdCheckbox';
-import IconSVG from '../../../../iconsvg/IconSVG';
-
-export interface IVehiclePriceSectionProps {
-  t?: (key: string, options?: object) => string;
-  className?: string;
-  id?: string;
-  title?: String;
-  isTotal?: boolean;
-  vatDeductible?: boolean;
-  isDealerSuperAdmin?: boolean;
-  routeObj?: any;
-  linkTag?: string;
-  classButton?: string;
-  showAboIcon?: boolean;
-  isNewPriceCategory?: boolean;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
-  monthlyInstallment?: number;
-  oldMonthlyInstallment?: number;
-  positionY?: string;
-  url?: string;
-  target?: string;
-  rel?: string;
-  iconName?: string;
-  priceSubMtl?: string | null;
-  mainImageId?: string;
-  showCompareCheckboxes?: boolean;
-  toRound?: boolean;
-  showOfferBtn?: boolean;
-  margin?: number;
-  leasing?: ILeasing;
-  financing?: IFinancing;
-  buy?: IBuy;
-  common: ICommonFinancing;
-  vatRate?: number;
-  onDetailsClick(id: string): void;
-  toggleCarToCompare?(carId?: React.ChangeEvent<HTMLInputElement>): void;
-  onRemoveClick?(carId: string): void;
-  toCompare?: boolean;
-  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
-  combineRefAlternative?: boolean;
-  typeAlternative?: string;
-  // ADV-88: hide the "monatlich z.B."/"monthly e.g." column header for the task's cars
-  // (new plug-in hybrids that get the externalised consumption row) so the price column
-  // moves up. Passed true from VehicleSmallCard only when the consumption row is shown.
-  suppressMonthlyFrom?: boolean;
-}
-
-// interface IPriceData {
-//   tooltipDescription?: string;
-//   perMonthOld?: any;
-//   isAlternativeText?: string;
-//   perMonthCurrent?: any;
-//   showAboIcon?: boolean;
-//   isPriceDisable?: boolean;
-//   isTotal?: boolean;
-//   isNewPriceCategory?: boolean;
-//   positionY?: any;
-//   priceSub?: string | null;
-//   prefixOldPrice?: string | null;
-//   postfix?: any;
-//   title?: string;
-//   margin?: number;
-//   totalCurrent: number;
-// }
-
-const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceSectionProps) => {
-
-  const onAddOfferClick = (event: any) => {
-    const { id, mainImageId, buy: { currentSalesPriceExtra } } = props;
-    event.stopPropagation();
-    event.preventDefault();
-    props.onAddOfferToMainSlideClick(id, mainImageId, currentSalesPriceExtra, props);
-  };
-
-  const onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const { id, onDetailsClick } = props;
-    event.preventDefault();
-    event.stopPropagation();
-    onDetailsClick(id);
-  };
-
-  const {
-    t,
-    combineRefAlternative,
-    url,
-    target,
-    rel,
-    isDealerSuperAdmin,
-    linkTag,
-    showOfferBtn,
-    routeObj,
-    toggleCarToCompare,
-    toCompare,
-    classButton,
-    onRemoveClick,
-    showCompareCheckboxes,
-    vatRate,
-    iconName,
-    vehicleComponentName,
-    financing: { monthlyInstallment, oldMonthlyInstallment },
-    leasing: {
-      monthlyInstallment: lMonthlyInstallment,
-      oldMonthlyInstallment: lOldMonthlyInstallment,
-      isActive: isLeasingActive
-    },
-    buy: {
-      currentSalesPriceExtra = 0,
-      highestPriceExtra = 0
-    } = {},
-    common: { isStrikeShown },
-    typeAlternative,
-    suppressMonthlyFrom,
-    margin
-  } = props;
-
-  const vehiclePriceSectionClassName = classnames(
-    styles.vehiclePriceSection,
-    { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
-    { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
-    { [styles.vehiclePriceTitleMain]: vehicleComponentName === 'main' }
-  );
-
-  const vehiclePriceTitleClassName = classnames(
-    styles.vehiclePriceTitle,
-    { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
-    { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
-    { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
-  );
-
-  const buttonClassNames = classnames(
-    classButton,
-    styles.buttonDetails,
-    { [styles.landingButton]: vehicleComponentName === 'landing' },
-    { [styles.isAlternativeButton]: typeAlternative }
-  );
-
-  const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
-                                   vehicleComponentName === 'landing' ||
-                                   vehicleComponentName === 'main' ? 'outlined' : 'contained';
-
-  // ADV-70 (design): the monthly label ("mtl."/"mth.") is shown BEFORE every monthly rate on
-  // all card surfaces (SRL desktop+mobile, comparable, home, landing) — derive it from the
-  // localized priceSub key instead of the consumer-passed priceSubMtl (which is null on mobile),
-  // so it renders consistently everywhere. VehiclePriceItem strips the leading "/".
-  const monthlyPrefix = (t && t('vehicleProps:value.priceSub')) || '';
-
-  const priceItemsGlobal = [
-    {
-      perMonthOld: oldMonthlyInstallment,
-      perMonthCurrent: monthlyInstallment,
-      title: t('vehicleProps:title.financing'),
-      // ADV-88 (design): drop the "z.B."/"e.g." prefix on the SRL card — the monthly label carries the meaning.
-      prefixOldPrice: false,
-      postfix: '3',
-      priceSub: monthlyPrefix,
-      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
-    },
-    {
-      perMonthOld: lOldMonthlyInstallment,
-      perMonthCurrent: lMonthlyInstallment,
-      prefixOldPrice: false,
-      postfix: '1,3',
-      isPriceDisable: !isLeasingActive,
-      title: t('vehicleProps:title.leasing'),
-      priceSub: monthlyPrefix,
-      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
-    }
-  ];
-
-  // const showAboCondition = vehicleComponentName !== 'favorite' &&
-  //                          vehicleComponentName !== 'recently' &&
-  //                          vehicleComponentName !== 'search';
-  const showAboCondition = false;
-
-  const Abo = showAboCondition ? [
-    {
-      perMonthOld: oldMonthlyInstallment,
-      perMonthCurrent: monthlyInstallment,
-      isNewPriceCategory: true,
-      showAboIcon: true,
-      isPriceDisable: true,
-      positionY: 'top',
-      title: t('vehicleProps:title.abo'),
-      tooltipDescription: t('vehicleProps:title.aboDescription')
-    }
-  ] : '';
-
-  const priceData:any = combineRefAlternative ? [
-    ...priceItemsGlobal,
-    {
-      isTotal: true,
-      totalCurrent: currentSalesPriceExtra,
-      postfix: !!vatRate ? '1' : '',
-      title: t('vehicleProps:title.buy'),
-      isAlternativeText: t('vehicleProps:title.margeInkl')
-    },
-    {
-      isTotal: true,
-      totalCurrent: margin ? margin : currentSalesPriceExtra,
-      title: t('vehicleProps:title.marge'),
-      isMarge: true
-    }
-  ] : [
-    ...priceItemsGlobal,
-    ...Abo,
-    {
-      isTotal: true,
-      totalCurrent: currentSalesPriceExtra,
-
-      postfix: !!vatRate ? '1' : '',
-      title: t('vehicleProps:title.buy'),
-      tooltipDescription: t('vehicleProps:title.buyDescription')
-    }
-  ];
-
-  return (
-    <section className={vehiclePriceSectionClassName}>
-      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
-        <CheckboxMaterial
-          checked={toCompare}
-          onChange={toggleCarToCompare}
-          labelPlacement='start'
-          label={t('FavoritesPage:toCompare')}
-          formControlClassName={styles.wrapCheckbox}
-        />
-      )}
-      {!suppressMonthlyFrom && vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
-        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-      )}
-      {!suppressMonthlyFrom && isMobileOnly && !showCompareCheckboxes && (
-        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
-      )}
-      {priceData.map((props: any) => (
-        <VehiclePriceItem
-          tooltipDescription={props.tooltipDescription}
-          key={props.title}
-          priceTitle={props.title}
-          isPriceDisable={props.isPriceDisable}
-          perMonthOld={props.perMonthOld}
-          perMonthCurrent={props.perMonthCurrent}
-          isNewPriceCategory={props.isNewPriceCategory}
-          isAlternativeText={props.isAlternativeText}
-          showAboIcon={props.showAboIcon}
-          totalOld={highestPriceExtra}
-          isTotal={props.isTotal}
-          priceSub={props.priceSub}
-          positionY={props.positionY}
-          url={url}
-          target={target}
-          rel={rel}
-          isStrikeShown={isStrikeShown}
-          iconName={iconName}
-          prefixOldPrice={props.prefixOldPrice}
-          totalCurrent={props.totalCurrent}
-          postfix={props.postfix}
-          linkTag={linkTag}
-          routeObj={routeObj}
-          vehicleComponentName={vehicleComponentName}
-          combineRefAlternative={combineRefAlternative}
-          isMarge={props.isMarge}
-        />
-      ))}
-      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
-        <div className={styles.wrapHandleCompare}>
-          <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
-            <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
-          </Button>
-          <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
-            <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
-            {t('FavoritesPage:compare')}
-          </Button>
-        </div>
-      )}
-      {isDealerSuperAdmin && !typeAlternative ? (
-        <Button className={styles.addOfferButton} onClick={onAddOfferClick}>
-          {t('vehicleProps:title.addOfferToMainSlide')}
-        </Button>
-      ) : null}
-      {showOfferBtn ? (
-        vehicleComponentName === 'landing' ? (
-          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
-        ) :
-          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
-      ) : ''}
-    </section>
-  );
-};
-
-export default VehiclePrice;
+import * as React from 'react';
+import styles from './VehiclePrice.styl';
+import classnames from 'classnames';
+import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
+import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../types/types';
+import { isMobileOnly } from 'react-device-detect';
+import Button from '../../../Button/Button';
+import CheckboxMaterial from '../../../MdCheckbox/MdCheckbox';
+import IconSVG from '../../../../iconsvg/IconSVG';
+
+export interface IVehiclePriceSectionProps {
+  t?: (key: string, options?: object) => string;
+  className?: string;
+  id?: string;
+  title?: String;
+  isTotal?: boolean;
+  vatDeductible?: boolean;
+  isDealerSuperAdmin?: boolean;
+  routeObj?: any;
+  linkTag?: string;
+  classButton?: string;
+  showAboIcon?: boolean;
+  isNewPriceCategory?: boolean;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  monthlyInstallment?: number;
+  oldMonthlyInstallment?: number;
+  positionY?: string;
+  url?: string;
+  target?: string;
+  rel?: string;
+  iconName?: string;
+  priceSubMtl?: string | null;
+  mainImageId?: string;
+  showCompareCheckboxes?: boolean;
+  toRound?: boolean;
+  showOfferBtn?: boolean;
+  margin?: number;
+  leasing?: ILeasing;
+  financing?: IFinancing;
+  buy?: IBuy;
+  common: ICommonFinancing;
+  vatRate?: number;
+  onDetailsClick(id: string): void;
+  toggleCarToCompare?(carId?: React.ChangeEvent<HTMLInputElement>): void;
+  onRemoveClick?(carId: string): void;
+  toCompare?: boolean;
+  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
+  combineRefAlternative?: boolean;
+  typeAlternative?: string;
+  // ADV-88: hide the "monatlich z.B."/"monthly e.g." column header for the task's cars
+  // (new plug-in hybrids that get the externalised consumption row) so the price column
+  // moves up. Passed true from VehicleSmallCard only when the consumption row is shown.
+  suppressMonthlyFrom?: boolean;
+}
+
+// interface IPriceData {
+//   tooltipDescription?: string;
+//   perMonthOld?: any;
+//   isAlternativeText?: string;
+//   perMonthCurrent?: any;
+//   showAboIcon?: boolean;
+//   isPriceDisable?: boolean;
+//   isTotal?: boolean;
+//   isNewPriceCategory?: boolean;
+//   positionY?: any;
+//   priceSub?: string | null;
+//   prefixOldPrice?: string | null;
+//   postfix?: any;
+//   title?: string;
+//   margin?: number;
+//   totalCurrent: number;
+// }
+
+const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceSectionProps) => {
+
+  const onAddOfferClick = (event: any) => {
+    const { id, mainImageId, buy: { currentSalesPriceExtra } } = props;
+    event.stopPropagation();
+    event.preventDefault();
+    props.onAddOfferToMainSlideClick(id, mainImageId, currentSalesPriceExtra, props);
+  };
+
+  const onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { id, onDetailsClick } = props;
+    event.preventDefault();
+    event.stopPropagation();
+    onDetailsClick(id);
+  };
+
+  const {
+    t,
+    combineRefAlternative,
+    url,
+    target,
+    rel,
+    isDealerSuperAdmin,
+    linkTag,
+    showOfferBtn,
+    routeObj,
+    toggleCarToCompare,
+    toCompare,
+    classButton,
+    onRemoveClick,
+    showCompareCheckboxes,
+    vatRate,
+    iconName,
+    vehicleComponentName,
+    financing: { monthlyInstallment, oldMonthlyInstallment },
+    leasing: {
+      monthlyInstallment: lMonthlyInstallment,
+      oldMonthlyInstallment: lOldMonthlyInstallment,
+      isActive: isLeasingActive
+    },
+    buy: {
+      currentSalesPriceExtra = 0,
+      highestPriceExtra = 0
+    } = {},
+    common: { isStrikeShown },
+    typeAlternative,
+    suppressMonthlyFrom,
+    margin
+  } = props;
+
+  const vehiclePriceSectionClassName = classnames(
+    styles.vehiclePriceSection,
+    { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
+    { [styles.vehiclePriceTitleMain]: vehicleComponentName === 'main' }
+  );
+
+  const vehiclePriceTitleClassName = classnames(
+    styles.vehiclePriceTitle,
+    { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+  );
+
+  const buttonClassNames = classnames(
+    classButton,
+    styles.buttonDetails,
+    { [styles.landingButton]: vehicleComponentName === 'landing' },
+    { [styles.isAlternativeButton]: typeAlternative }
+  );
+
+  const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
+                                   vehicleComponentName === 'landing' ||
+                                   vehicleComponentName === 'main' ? 'outlined' : 'contained';
+
+  // ADV-70 (design): the monthly label ("mtl."/"mth.") is shown BEFORE every monthly rate on
+  // all card surfaces (SRL desktop+mobile, comparable, home, landing) — derive it from the
+  // localized priceSub key instead of the consumer-passed priceSubMtl (which is null on mobile),
+  // so it renders consistently everywhere. VehiclePriceItem strips the leading "/".
+  const monthlyPrefix = (t && t('vehicleProps:value.priceSub')) || '';
+
+  const priceItemsGlobal = [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      title: t('vehicleProps:title.financing'),
+      // ADV-88 (design): drop the "z.B."/"e.g." prefix on the SRL card — the monthly label carries the meaning.
+      prefixOldPrice: false,
+      postfix: '3',
+      priceSub: monthlyPrefix,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
+    },
+    {
+      perMonthOld: lOldMonthlyInstallment,
+      perMonthCurrent: lMonthlyInstallment,
+      prefixOldPrice: false,
+      postfix: '1,3',
+      isPriceDisable: !isLeasingActive,
+      title: t('vehicleProps:title.leasing'),
+      priceSub: monthlyPrefix,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
+    }
+  ];
+
+  // const showAboCondition = vehicleComponentName !== 'favorite' &&
+  //                          vehicleComponentName !== 'recently' &&
+  //                          vehicleComponentName !== 'search';
+  const showAboCondition = false;
+
+  const Abo = showAboCondition ? [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      isNewPriceCategory: true,
+      showAboIcon: true,
+      isPriceDisable: true,
+      positionY: 'top',
+      title: t('vehicleProps:title.abo'),
+      tooltipDescription: t('vehicleProps:title.aboDescription')
+    }
+  ] : '';
+
+  const priceData:any = combineRefAlternative ? [
+    ...priceItemsGlobal,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      isAlternativeText: t('vehicleProps:title.margeInkl')
+    },
+    {
+      isTotal: true,
+      totalCurrent: margin ? margin : currentSalesPriceExtra,
+      title: t('vehicleProps:title.marge'),
+      isMarge: true
+    }
+  ] : [
+    ...priceItemsGlobal,
+    ...Abo,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      tooltipDescription: t('vehicleProps:title.buyDescription')
+    }
+  ];
+
+  return (
+    <section className={vehiclePriceSectionClassName}>
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <CheckboxMaterial
+          checked={toCompare}
+          onChange={toggleCarToCompare}
+          labelPlacement='start'
+          label={t('FavoritesPage:toCompare')}
+          formControlClassName={styles.wrapCheckbox}
+        />
+      )}
+      {!suppressMonthlyFrom && vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {!suppressMonthlyFrom && isMobileOnly && !showCompareCheckboxes && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {priceData.map((props: any) => (
+        <VehiclePriceItem
+          tooltipDescription={props.tooltipDescription}
+          key={props.title}
+          priceTitle={props.title}
+          isPriceDisable={props.isPriceDisable}
+          perMonthOld={props.perMonthOld}
+          perMonthCurrent={props.perMonthCurrent}
+          isNewPriceCategory={props.isNewPriceCategory}
+          isAlternativeText={props.isAlternativeText}
+          showAboIcon={props.showAboIcon}
+          totalOld={highestPriceExtra}
+          isTotal={props.isTotal}
+          priceSub={props.priceSub}
+          positionY={props.positionY}
+          url={url}
+          target={target}
+          rel={rel}
+          isStrikeShown={isStrikeShown}
+          iconName={iconName}
+          prefixOldPrice={props.prefixOldPrice}
+          totalCurrent={props.totalCurrent}
+          postfix={props.postfix}
+          linkTag={linkTag}
+          routeObj={routeObj}
+          vehicleComponentName={vehicleComponentName}
+          combineRefAlternative={combineRefAlternative}
+          isMarge={props.isMarge}
+        />
+      ))}
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <div className={styles.wrapHandleCompare}>
+          <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
+            <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
+          </Button>
+          <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
+            <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
+            {t('FavoritesPage:compare')}
+          </Button>
+        </div>
+      )}
+      {isDealerSuperAdmin && !typeAlternative ? (
+        <Button className={styles.addOfferButton} onClick={onAddOfferClick}>
+          {t('vehicleProps:title.addOfferToMainSlide')}
+        </Button>
+      ) : null}
+      {showOfferBtn ? (
+        vehicleComponentName === 'landing' ? (
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        ) :
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+      ) : ''}
+    </section>
+  );
+};
+
+export default VehiclePrice;

package/compat/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -1,33 +1,33 @@
-@import '../../../legacy-theme/mixins.styl';
-
-.carProp
-  display: flex
-  box-sizing: border-box;
-  font-size: 12px
-  line-height: 1;
-  color: rgba(76, 78, 100, 0.87);
-  align-items: center;
-  border-bottom: 1px solid rgba(76, 78, 100, 0.12);
-
-.smallProp
-  span
-    font-size: 9px !important
-
-.pluginVal
-  span
-    font-size: 9px !important
-
-.carIcon
-  width: 28px;
-  height: 30px;
-  margin-right: 5px
-  flex-shrink: 0
-
-  +media-tablet-landscape-up()
-    margin-right: 10px
-
-.noIcon
-  padding-left: 5px
-
-[class*='smallText']
+@import '../../../legacy-theme/mixins.styl';
+
+.carProp
+  display: flex
+  box-sizing: border-box;
+  font-size: 12px
+  line-height: 1;
+  color: rgba(76, 78, 100, 0.87);
+  align-items: center;
+  border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+
+.smallProp
+  span
+    font-size: 9px !important
+
+.pluginVal
+  span
+    font-size: 9px !important
+
+.carIcon
+  width: 28px;
+  height: 30px;
+  margin-right: 5px
+  flex-shrink: 0
+
+  +media-tablet-landscape-up()
+    margin-right: 10px
+
+.noIcon
+  padding-left: 5px
+
+[class*='smallText']
   font-size:10px;