@bytebrand/fe-ui-core 4.1.172 → 4.1.174

package/source/framework/factories/BreadcrumbsFactory.tsx

@@ -34,6 +34,7 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
 
   COMPARE: (props: any) => ({
     list: [
+      { link: '/account/dashboard', title: props.t('common:breadcrumbs.Dashboard') },
       { link: '', title: props.t('common:breadcrumbs.Compare') }
     ]
   }),
@@ -51,6 +52,13 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
     ]
   }),
 
+  USER_DASHBOARD: (props: any) => ({
+    list: [
+      { link: '', title: props.t('common:breadcrumbs.Dashboard') }
+    ],
+    className: 'breadcrumbsUserDashboard'
+  }),
+
   DEALER_EMPLOYEES_SET: (props: any) => ({
     list: [
       { link: '/account/position/employees', title: props.t('common:breadcrumbs.Employees') },
@@ -107,6 +115,7 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
       }
     ],
     classBreadcrumbsAny: 'VEHICLE_DETAILS',
+    className: 'breadcrumbsCDP',
     withBackBtn: true
   }),
 
@@ -126,6 +135,7 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
       }
     ],
     classBreadcrumbsAny: 'VEHICLE_DETAILS',
+    className: 'breadcrumbsCDP',
     withBackBtn: true
   }),
 
@@ -145,6 +155,7 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
       }
     ],
     classBreadcrumbsAny: 'VEHICLE_DETAILS',
+    className: 'breadcrumbsCDP',
     withBackBtn: true
   }),
 
@@ -167,22 +178,22 @@ const BreadcrumbsFactory: IBreadcrumbsFactoryConfig = {
         link: '',
         title: props.t('common:breadcrumbs.MySearches')
       }
-    ]
+    ],
+    className: 'breadcrumbsMySearches'
   }),
 
   FAVORITES: (props: any) => ({
     list: [
-      {
-        link: '',
-        title: props.t('common:breadcrumbs.Favorites')
-      }
-    ]
+      { link: '/account/dashboard', title: props.t('common:breadcrumbs.Dashboard') },
+      { link: '', title: props.t('common:breadcrumbs.Favorites') }
+    ],
+    className: 'breadcrumbsMySearches'
   }),
 
   DATA_IMPORT: (props: any) => ({
     list: [
-        { link: '/account/dashboard', title: props.t('common:breadcrumbs.Dashboard') },
-        { link: '', title: props.t('common:breadcrumbs.DataImport') }
+      { link: '/account/dashboard', title: props.t('common:breadcrumbs.Dashboard') },
+      { link: '', title: props.t('common:breadcrumbs.DataImport') }
     ]
   }),
 

package/source/framework/factories/FactoryTypes.d.ts

@@ -13,6 +13,7 @@ export interface IBreadcrumbsFactoryConfig {
 interface IBreadcrumbsObject {
   list?: any[];
   withBackBtn?: boolean;
+  className?: string;
   classBreadcrumbsAny?: string;
 }
 

package/source/framework/types/types.ts

@@ -89,7 +89,7 @@ export interface IVehicleInfo {
   i18nPrefixForPriceRating?: string;
   gearbox?: string;
   regDate?: number;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   language?: string;
   combineRefAlternative?: boolean;
   routeObj?: any;
@@ -108,6 +108,8 @@ export interface IVehicleInfo {
   damaged?: any;
   driveType?: any;
   url?: string;
+  target?: string;
+  rel?: string;
 }
 
 export interface IVehicleTitleProps {
@@ -115,7 +117,7 @@ export interface IVehicleTitleProps {
   model?: string;
   subModel?: string;
   option?: string;
-  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite';
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isSponsored?: boolean;
   showFavoriteStar?: boolean;
   id?: string;

package/source/framework/utils/CommonUtils.ts

@@ -7,16 +7,13 @@ import {
   DROP_DOWN_GROUP, RATE_DEFAULT, MMS_GROUPS_KEY, MMS_GROUP_FIELDS
 } from '../constants/SearchWidget';
 import { priceRatings, priceRatingConfig } from '../constants/price';
-import { HUNDRED } from '../constants/common';
+import { GOOGLE_BUNDLE_COOKIES, HUNDRED } from '../constants/common';
 import { offers } from '../constants';
 import { FILTERS_IN_TITLE, MANUFACTURER_KEY, MAX_FILTERS_IN_TITLE, MODEL_KEY } from '../constants/Search';
-import { config } from '../constants/app';
+import { SearchPage as SearchPageTranslate } from '../../locales/data';
 
 const PRICE_DEFAULT = DROP_DOWN_GROUP[PRICE].defaultValue;
 
-// const RANGE_FILTERS = [FIRST_REGISTRATION, MILEAGE, PRICE];
-// const ARRAY_RANGE_FILTERS = [FIRST_REGISTRATION, MILEAGE];
-
 export const formatMileage = (millage: number | string) => {
   return millage.toLocaleString('en-US').replace(/,/g, '.');
 };
@@ -402,7 +399,11 @@ export const getSupportedImageFormat = (IMAGE_URL: string, vehicleID: string, im
   return webpFeature ? `${vehicleImageURL}/${size}-cached.webp` : `${vehicleImageURL}/${size}-cached.jpeg`;
 };
 
-export function getChipFilterValue(chip: any, t: (key: string, options?: object) => string, language: string = 'de') {
+export function getChipFilterValue(
+  chip: any,
+  t: (key: string, options?: object) => string = (phrase: string, _?: object) => _get(SearchPageTranslate(chip), phrase.replace(':', '.'), phrase),
+  language: string = 'de'
+) {
   let filterValue: string;
   let title: string;
   let from: string;
@@ -532,15 +533,31 @@ export function setUtmParameters() {
   const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
-};
+}
 
 export const updateCookieList = () => {
+  let cookieConsentList = Object.keys(GOOGLE_BUNDLE_COOKIES);
+  let isFBGranted = true;
+  let isHotjarGranted = true;
   const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+
   const parsedUrl = new URL(window.location.href);
   const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
   Object.keys(cookieConfig).forEach((group: string) => {
     cookieConfig[group].forEach((cookie: string) => {
-      Cookies.remove(cookie, { path: '/', domain });
-    })
+      Cookies.remove(cookie, { domain, path: '/' }); // manually remove selected cookies
+      // google
+      if (cookieConsentList.includes(cookie)) cookieConsentList = cookieConsentList.filter(i => i !== cookie);  // deny google cookie consent for _gcl_au, _ga, _gid, _gat_UA-31842-13, etc
+      // fb
+      // tslint:disable-next-line:prefer-switch
+      else if (cookie === '_fbp') isFBGranted = false;
+      else if (cookie === 'hotjar') isHotjarGranted = false;
+    });
   });
+  // grant google cookies
+  if (typeof window.grantCookieConsent === 'function') window.grantCookieConsent(cookieConsentList);
+  // grant FB cookies
+  if (isFBGranted && typeof window.fbq === 'function') window.fbq('consent', 'grant');
+  // grant Hotjar cookies
+  if (isHotjarGranted && typeof window.grantHotjarCookieConsent === 'function') window.grantHotjarCookieConsent();
 };

package/source/framework/vehiclesProps/decoratedProps.tsx

@@ -275,7 +275,7 @@ const getDecoratedProps = (
     fuelCapacity: {
       title: t('vehicleProps:title.fuelCapacity'),
       get value() {
-        const fuelCapacity = car.sizeVolumeWeight.fuelCapacity;
+        const fuelCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.fuelCapacity;
         return Number.isFinite(fuelCapacity)
           ? t('vehicleProps:value.fuelCapacity', { capacity: fuelCapacity.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -285,7 +285,7 @@ const getDecoratedProps = (
     batteryCapacity: {
       title: t('vehicleProps:title.batteryCapacityTitle'),
       get value() {
-        const { batteryCapacity } = car.battery;
+        const batteryCapacity = car.battery && car.battery.batteryCapacity;
         return batteryCapacity && Number.isFinite(batteryCapacity)
           ? t('vehicleProps:value.batteryCapacity', { batteryCapacity: batteryCapacity.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -295,11 +295,9 @@ const getDecoratedProps = (
     chargingDuration230V: {
       title: t('vehicleProps:title.chargingDuration230V'),
       get value() {
-        const {
-          batteryChargingDuration230VSelect,
-          batteryChargingDuration230VHour,
-          batteryCharchingDuration230VMinutesHours
-        } = car.battery;
+        const batteryChargingDuration230VSelect = car.battery && car.battery.batteryChargingDuration230VSelect;
+        const batteryChargingDuration230VHour = car.battery && car.battery.batteryChargingDuration230VHour;
+        const batteryCharchingDuration230VMinutesHours = car.battery && car.battery.batteryCharchingDuration230VMinutesHours;
 
         return batteryChargingDuration230VSelect
           ? `${batteryChargingDuration230VHour ? `${batteryChargingDuration230VHour} ${isCheckedBatteryTime(batteryCharchingDuration230VMinutesHours, t)}` : ''} ${batteryChargingDuration230VSelect}`
@@ -309,11 +307,9 @@ const getDecoratedProps = (
     chargingDurationMaxSpeed: {
       title: t('vehicleProps:title.chargingDurationMaxSpeed'),
       get value() {
-        const {
-          batteryChargingDurationMaxSelect,
-          batteryChargingDurationMaxHour,
-          batteryCharchingDurationMaxSelectMinutesHours
-        } = car.battery;
+        const batteryChargingDurationMaxSelect = car.battery && car.battery.batteryChargingDurationMaxSelect
+        const batteryChargingDurationMaxHour = car.battery && car.battery.batteryChargingDurationMaxHour
+        const batteryCharchingDurationMaxSelectMinutesHours = car.battery && car.battery.batteryCharchingDurationMaxSelectMinutesHours
 
         return batteryChargingDurationMaxSelect
           ? `${batteryChargingDurationMaxHour ? `${batteryChargingDurationMaxHour} ${isCheckedBatteryTime(batteryCharchingDurationMaxSelectMinutesHours, t)}` : ''} ${batteryChargingDurationMaxSelect}`
@@ -323,7 +319,7 @@ const getDecoratedProps = (
     batteryChargerType: {
       title: t('vehicleProps:title.batteryChargerType'),
       get value() {
-        const { batteryChargerType } = car.battery;
+        const batteryChargerType = car.battery && car.battery.batteryChargerType
 
         return isPropDefined(batteryChargerType)
           ? batteryChargerType.map((item: any) => t(`cbd:${item}`)).join('\n')
@@ -356,7 +352,7 @@ const getDecoratedProps = (
     length: {
       title: t('vehicleProps:title.length'),
       get value() {
-        const length = car.sizeVolumeWeight.length;
+        const length = car.sizeVolumeWeight && car.sizeVolumeWeight.length;
         return Number.isFinite(length)
           ? t('vehicleProps:value.length', { size: length.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -366,7 +362,7 @@ const getDecoratedProps = (
     width: {
       title: t('vehicleProps:title.width'),
       get value() {
-        const width = car.sizeVolumeWeight.width;
+        const width = car.sizeVolumeWeight && car.sizeVolumeWeight.width;
         return Number.isFinite(width)
           ? t('vehicleProps:value.width', { size: width.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -376,7 +372,7 @@ const getDecoratedProps = (
     height: {
       title: t('vehicleProps:title.height'),
       get value() {
-        const height = car.sizeVolumeWeight.height;
+        const height = car.sizeVolumeWeight && car.sizeVolumeWeight.height;
         return Number.isFinite(height)
           ? t('vehicleProps:value.height', { size: height.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -396,7 +392,7 @@ const getDecoratedProps = (
     capacityLoad: {
       title: t('vehicleProps:title.loadingVolume'),
       get value() {
-        const completeCapacity = car.sizeVolumeWeight.completeCapacity;
+        const completeCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.completeCapacity;
         return Number.isFinite(completeCapacity)
           ? t('vehicleProps:value.capacityLoad', { capacity: completeCapacity.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -406,7 +402,7 @@ const getDecoratedProps = (
     bootCapacity: {
       title: t('vehicleProps:title.bootCapacity'),
       get value() {
-        const cargoCapacity = car.sizeVolumeWeight.cargoCapacity;
+        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
         return Number.isFinite(cargoCapacity)
           ? t('vehicleProps:value.bootCapacity', { capacity: cargoCapacity.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -426,7 +422,7 @@ const getDecoratedProps = (
     tare: {
       title: t('vehicleProps:title.tare'),
       get value() {
-        const emptyWeight = car.sizeVolumeWeight.emptyWeight;
+        const emptyWeight = car.sizeVolumeWeight && car.sizeVolumeWeight.emptyWeight;
         return Number.isFinite(emptyWeight)
           ? t('vehicleProps:value.tareWeight', { weight: (emptyWeight).toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -436,7 +432,7 @@ const getDecoratedProps = (
     maximumWeight: {
       title: t('vehicleProps:title.maximumWeight'),
       get value() {
-        const cargoCapacity = car.sizeVolumeWeight.cargoCapacity;
+        const cargoCapacity = car.sizeVolumeWeight && car.sizeVolumeWeight.cargoCapacity;
         return Number.isFinite(cargoCapacity)
           ? t('vehicleProps:value.maximumWeightCapacity', { capacity: cargoCapacity.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -446,7 +442,7 @@ const getDecoratedProps = (
     trailerWeightBraked: {
       title: t('vehicleProps:title.trailerLoadBraked'),
       get value() {
-        const trailerWeightBraked = car.sizeVolumeWeight.trailerWeightBraked;
+        const trailerWeightBraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightBraked;
         return Number.isFinite(trailerWeightBraked)
           ? t('vehicleProps:value.weight', { weight: trailerWeightBraked.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -456,7 +452,7 @@ const getDecoratedProps = (
     trailerWeightUnbraked: {
       title: t('vehicleProps:title.trailerLoadUnbraked'),
       get value() {
-        const trailerWeightUnbraked = car.sizeVolumeWeight.trailerWeightUnbraked;
+        const trailerWeightUnbraked = car.sizeVolumeWeight && car.sizeVolumeWeight.trailerWeightUnbraked;
         return Number.isFinite(trailerWeightUnbraked)
           ? t('vehicleProps:value.weight', { weight: trailerWeightUnbraked.toLocaleString(language) })
           : t('vehicleProps:value.na');
@@ -775,7 +771,7 @@ const getDecoratedProps = (
     batteryRangeElectric: {
       title: t('vehicleProps:title.batteryRangeElectric'),
       get value() {
-        const { batteryRangeElectric } = car.battery;
+        const batteryRangeElectric = car.battery && car.battery.batteryRangeElectric;
         return Number.isFinite(batteryRangeElectric)
           ? t('vehicleProps:value.batteryRangeElectric', { consumption: batteryRangeElectric.toLocaleString(language) })
           : t('vehicleProps:value.na');

package/source/framework/vehiclesProps/equipment.ts

@@ -7,11 +7,12 @@ export const getEquipment = (car: ICar, t: any): IEquipmentProps[] => {
   const {
     doors,
     wheel,
-    extras,
+    extras = {},
     window,
     mirrors,
     multimedia,
     climatisation,
+    trailerCoupling = {},
     airbags: { airbag },
     heatingCooling: { auxiliaryHeating, climatisation: heatingCoolingClimatisation },
     lights: { lightSensor, ...lights },
@@ -27,7 +28,7 @@ export const getEquipment = (car: ICar, t: any): IEquipmentProps[] => {
   const heatingDriverSeats = Array.isArray(driverSeats) && driverSeats.indexOf('selector_driverSeats_electricHeated') !== -1;
   const heatingCoDriverSeats = Array.isArray(coDriverSeats) && coDriverSeats.indexOf('selector_coDriverSeats_electricHeated') !== -1;
   const heatingBackSeats = Array.isArray(backSeats) && backSeats.indexOf('selector_backSeats_electricHeated') !== -1;
-
+  const extrasValue = { ...extras, ...trailerCoupling }
   return [
     {
       title: t('accordion.captionAssistanceSystems'), icon: 'stop',
@@ -114,7 +115,7 @@ export const getEquipment = (car: ICar, t: any): IEquipmentProps[] => {
     },
     {
       title: t('accordion.captionExtras'), icon: 'newCar',
-      value: addPrefixToKeys(extras, 'extras')
+      value: addPrefixToKeys(extrasValue, 'extras')
     }
   ];
 };

package/source/locales/data.ts

@@ -54,6 +54,8 @@ export const vehicleProps = (car?: any, isOfferAvailable: boolean = true) => {
         co2Combined: `${vehicleOption.co2}g CO2/km (komb)*`,
         co2: `${vehicleOption.co2} g/km `,
         na: 'N/A',
+        priceSub: '/mtl.',
+        prefixOldPrice: 'ab',
         vehicleOwners: `${vehicleOption.vehicleOwners} Fahrzeughalter`,
         vehicleOwners_plural: `${count} Fahrzeughalter`,
         doorsOnly: `${vehicleOption.doorsOnly} Türen`,

package/source/theme/priceReviewColors.styl

@@ -6,5 +6,7 @@ $priceReviewColors = {
   increasedPrice: rgba(237, 157, 55, 1)
   fairPrice: rgba(173, 208, 66, 1)
   goodPrice: rgba(102, 212, 102, 1)
-  topPrice: rgba(0, 184, 0, 1)
+  topPrice: rgba(31, 193, 31, 1)
 }
+
+

package/utils.ts

@@ -15,3 +15,19 @@ export {
   createDateAsUTC
 } from './source/framework/utils/DateUtils';
 export { getPriceRating, getPriceRatingConfig } from './source/framework/utils/CommonUtils';
+
+export {
+  getVehicleDetails,
+  getOverviewDetails,
+  dimensionDetails,
+  availAbilityDetails,
+  colorAndMaterialDetails
+} from './source/framework/vehiclesProps/vehicleDetails';
+
+export {
+  getPowerLabel
+} from './source/framework/vehiclesProps/decoratedProps';
+
+export {
+  getActualHighlights
+} from './source/framework/constants/highlights';