@bytebrand/fe-ui-core 4.2.251 → 4.3.0

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.styl

@@ -52,17 +52,4 @@
   font-weight: 700
   font-size: 14px
   border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-
-.vehicleId
-  padding: 11px
-  background-color: #fff
-  border-bottom: 1px solid #e8e8e8;
-  padding-bottom: 19px;
-  
-.vehicleIdLabel
-  font-size: 14px
-  font-weight: 700
-  line-height: 16px
-  margin-bottom: 12px
-  padding: 0 5px
+  border-bottom-right-radius: 10px;

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -3,17 +3,16 @@ import _get from 'lodash/get';
 import _startsWith from 'lodash/startsWith';
 import _debounce from 'lodash/debounce';
 import qs from 'qs';
-import { isArray, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 import { checkRangeValuesOnEqual, getGroupValuesForQuery } from '../../../../framework/utils/CommonUtils';
 import { FilterBlockFactory } from '../../../SearchFilters/common/FilterBlock/FilterBlockFactory';
 import { FilterGroups, IFilters } from '../../../SearchFilters/FiltersFactory';
-import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME } from '../../../../framework/constants/Search';
+import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME, SUB_MODEL_KEY } from '../../../../framework/constants/Search';
 import { MMS_GROUPS_KEY, OBJECT_FILTERS } from '../../../../framework/constants/SearchWidget';
 import { resolveMmsValue } from '../../../../framework/utils/FiltersUtils';
 import FilterBlock from '../../../SearchFilters/common/FilterBlock/FilterBlock';
 import styles from './FiltersContainer.styl';
 import AlternativeID from '../../../SearchFilters/filters/AlternativeID';
-import MaterialField from '../../../_common/MaterialField/MaterialField';
 
 type PathParamsType = {
   location?: any;
@@ -34,7 +33,7 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   aggregation: {};
   setActiveSorting: (newActiveSorting: string) => void;
   setLastSearchString: (filters: IFilters, query: string) => void;
-  search: (filters: any, page?: number, getStats?: boolean, vehicleID?: string|null) => void;
+  search: (filters: any, page?: number, getStats?: boolean) => void;
   resetFiltersToDefault: () => void;
   clearSearchState: (clearSorting?: boolean) => void;
   addMmsGroup: () => void;
@@ -55,7 +54,6 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   t?: (phrase: string) => string;
   isDealerPage?: boolean;
   isAlternative?: boolean;
-  vehicleID?: string;
   successTransition?: boolean;
   isErrorAlternativeField: boolean;
   Link?: any;
@@ -68,12 +66,8 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   }
 
   componentDidUpdate(prevProps: IFiltersContainerProps) {
-    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting, vehicleID } = this.props;
-    console.log('vehicleID', vehicleID);
-    if (
-        (prevProps.location.search !== location.search) && 
-        !_startsWith(location.search, '?pageNumber'))
-      {
+    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting } = this.props;
+    if ((prevProps.location.search !== location.search) && !_startsWith(location.search, '?pageNumber')) {
       const queryFromFilters = this.getQueryFromFilters();
       const prevQueryFromFilters = ['pageNumber', 'activeSort'].reduce((url, param) => url.replace(new RegExp(`(^${param}=\\w*&|&${param}=\\w*)`), ''), prevProps.location.search.slice(1));
       const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
@@ -89,11 +83,11 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
       if (activeSort !== activeSorting) {
         // activeSorting = activeSort; // TODO make a function to change at searchStore
-        setActiveSorting(activeSort as string);
+        setActiveSorting(activeSort);
       }
 
       clearSearchState(!activeSort);
-      search(filters, Number(pageNumber) || 1, true, vehicleID);
+      search(filters, pageNumber || 1, true);
     }
 
     this.updateFinancingSearchConfig();
@@ -200,46 +194,41 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (paramsKeys.length) {
       paramsKeys.forEach((filter: string) => {
         const paramValue = paramsFromQuery[filter];
+
         if (filter === MMS_GROUPS_KEY) { //tslint:disable-line
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                if (filter === MMS_GROUPS_KEY) addMmsGroup();
+          paramValue.map((group: any, index: number) => {
+            if (index >= 1) {
+              if (filter === MMS_GROUPS_KEY) addMmsGroup();
+            }
+
+            Object.keys(group).forEach((key: string) => {
+              changeFilterValue(key, group[key], index);
+              if (key === MANUFACTURER_KEY) {
+                getModelsInfoByMaker(group[key], true).then((response: any) => {
+                  const models = response || [];
+                  addModelsToFilters(models, index);
+                });
               }
-
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-                if (key === MANUFACTURER_KEY) {
-                  getModelsInfoByMaker(group[key], true).then((response: any) => {
-                    const models = response || [];
-                    addModelsToFilters(models, index);
-                  });
-                }
-              });
             });
-          }
+          });
         } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
-          if (isArray(paramValue)) {
-            const stringParamValue: string[] = paramValue as string[];
-            stringParamValue.map((group: any, index: number) => {
-              if (index >= 1) {
-                addMmExcludeGroup();
-              }
+          paramValue.map((group: any, index: number) => {
+            if (index >= 1) {
+              addMmExcludeGroup();
+            }
 
-              Object.keys(group).forEach((key: string) => {
-                changeFilterValue(key, group[key], index);
-              });
+            Object.keys(group).forEach((key: string) => {
+              changeFilterValue(key, group[key], index);
             });
-          }
+          });
         } else {
           // Defines whether filter is range or not.
           const isRange = rangeFiltersStrings.indexOf(filter) !== -1;
           const isObject = objectFiltersStrings.indexOf(filter) !== -1;
 
           // Transform url encoded param into range filter object.
-          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
-          changeFilterValue(filter, valueToSend as string);
+          const valueToSend = isRange ? qs.parse(paramValue, { ignoreQueryPrefix: true }) : paramValue;
+          changeFilterValue(filter, valueToSend);
           if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
         }
       });
@@ -314,7 +303,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (isHistogram) {
       const histogramData = histograms[filterField].length ? histograms[filterField] : RANGE_FILTERS[filter].options;
       const actualValues = {
-        from: filters[filter].value.from ? filters[filter].value.from : histogramData[0].from,
+        from: histogramData[0].from,
         to: histogramData[histogramData.length - 1].to
       };
 
@@ -388,37 +377,24 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     });
   };
 
-  onVehicleIdChange = (value: string) => {
-    const { filters, changeFilterValue, search } = this.props;
-    const upperCaseValue = value.toLocaleUpperCase().trim();
-    if (upperCaseValue.length === 6 || !value) {
-      this.onFilterChange('VEHICLE_ID', upperCaseValue);
-      changeFilterValue('VEHICLE_ID', upperCaseValue);
-      search(filters, 1, true);
-    }
-  };
-
   render() {
-    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition, filters } = this.props;
+    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition } = this.props;
     const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
-
-    const { VEHICLE_ID } = filters;
-
     const alternativeIDProps = {
       t,
       successTransition,
-      autoDeId: paramsFromQuery.autoDeId as string,
+      autoDeId: paramsFromQuery.autoDeId,
       error: isErrorAlternativeField,
       onChange: onAlternativeRedirect
     };
-    console.log('isErrorAlternativeField', isErrorAlternativeField);
+
     return (
       <div className={styles.filters}>
         {isAlternative ? (
           <div className={styles.titleAlternative}>
             <div className={styles.titleWrap}>
               <h3 className={styles.titleTextAlternative}>auto.de-ID</h3>
-              <Link to={`/alternative/detailed${locationSearch}`} className={styles.titleLink}>
+              <Link to={ `/alternative/detailed${locationSearch}` } className={styles.titleLink}>
                 {this.props.t('SearchPage:detailedSearch')}
               </Link>
             </div>
@@ -428,19 +404,8 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
         <div className={styles.title}>
           <h3 className={styles.titleText}>{this.props.t('SearchPage:filterBy')}</h3>
         </div>
-        {!isAlternative ? (
-          <div className={styles.vehicleId}>
-            <div className={styles.vehicleIdLabel}>auto.de-ID</div>
-            <MaterialField
-              value={VEHICLE_ID.value}
-              onChange={this.onVehicleIdChange}
-              size='custom'
-              placeholder={t('SearchPage:vehicleIdexample')}
-            />
-          </div>
-        ) : ''}
         {this.renderFilters()}
-        <Link className={styles.linkToDetailed} to={`/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}`}>{t('SearchPage:detailedSearch')}</Link>
+        <Link className={styles.linkToDetailed} to={ `/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}` }>{t('SearchPage:detailedSearch')}</Link>
       </div>
     );
   }
@@ -454,10 +419,9 @@ const removeUnknownOptions = (options: any) => {
 // export default React.memo(FiltersContainer);
 
 export default React.memo(FiltersContainer, (props, nextProps) => {
-  const { t, location, filters, aggregation, isErrorAlternativeField } = props;
-  return t === nextProps.t &&
-    location.search === nextProps.location.search &&
-    isErrorAlternativeField === nextProps.isErrorAlternativeField &&
-    isEqual(aggregation, nextProps.aggregation) &&
-    isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS);
-});
+  const { t, location, filters, aggregation } = props;
+  return t        === nextProps.t &&
+  location.search === nextProps.location.search &&
+  isEqual(aggregation, nextProps.aggregation) &&
+  isEqual(filters.MMS_GROUPS, nextProps.filters.MMS_GROUPS)
+});

package/source/framework/constants/common.ts

@@ -8,103 +8,74 @@ export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 
 export const HUNDRED = 100;
 
-export const GOOGLE_BUNDLE_COOKIES = [
-  'analytics_storage',
-  'ad_storage',
-  'functionality_storage',
-  'personalization_storage',
-  'security_storage'
-];
+export const GOOGLE_BUNDLE_COOKIES = {
+  analytics_storage: { name: 'Google-Analytics' },
+  ad_storage: { name: 'Google-Werbeausrichtung' },
+  functionality_storage: { name: 'Google-Funktionalität' },
+  personalization_storage: { name: 'Google-Personalisierung' },
+  security_storage: { name: 'Google-Sicherheit' }
+};
 
 /* tslint:disable */
-
-export const COOKIE_SCHEMA_LINKS = {
-  ['auto.de']: 'https://www.auto.de/datenschutz/',
-  Cloudflare: 'https://www.cloudflare.com/de-de/gdpr/introduction/',
-  Firebase: 'https://firebase.google.com/support/privacy?hl=de',
-  Google: 'https://policies.google.com/privacy?hl=de',
-  Criteo: 'https://www.criteo.com/de/privacy/',
-  Facebook: 'https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0',
-  ['Google Analytics']: 'https://policies.google.com/privacy?hl=de',
-  Hotjar: 'https://www.hotjar.com/legal/policies/privacy/de/',
-  Microsoft: 'https://privacy.microsoft.com/de-de/privacystatement',
-  Matomo: 'https://matomo.org/privacy-policy/',
-  Trustpilot: 'https://de.legal.trustpilot.com/for-reviewers/end-user-privacy-terms',
-  Awin: 'https://www.awin.com/de/datenschutzerklarung',
-  Youtube:'https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/'
-}
-
 export const COOKIE_SCHEMA = {
   necessary: {
-    ['auto.de']: ['next-i18next'],
-    Cloudflare: [
-      'cf_chl_2',
-      'cf_chl_rc_ni',
-      'cf_chl_prog'
-    ],
-    Firebase: [''],
-    Matomo: ['MATOMO_SESSID','_pk_ses.1.4d04', '_pk_id.1.4d04'],
-    Trustpilot: ['']
+    __cfruid: { name: 'Cloudflare' },
+    cf_chl_2: { name: 'Cloudflare für Webverkehr zu identifizieren' },
+    cf_chl_rc_ni: { name: 'Cloudflare für den internen Gebrauch' },
+    ['next-i18next']: { name: 'Spracheinstellungen' },
+    _cfuvid: { name: 'Cloudflare WAF' },
+    cf_chl_prog: { name: 'Cloudflare für JS' },
+    __cf_bm: { name: 'Cloudflare bot' }
   },
   analytics: {
-    ['auto.de']: [
-      'sentry',
-      'callback',
-      'locale'
-    ],
-    Criteo: [
-      'uid',
-      'PugT',
-      'demdex',
-      'cto_bundle',
-      'tuuid',
-      'tuuid_lu',
-      'c',
-      'CMID',
-      'CMPS',
-      'CMPRO',
-      'uuid2',
-      'um',
-      'umeh',
-      'KRTBCOOKIE_97',
-      'IDSYNC',
-      'dpm',
-      '_kuid_',
-      'visitor-id',
-      'data-c-ts',
-      'data-c',
-      'CMTS',
-      'mv_tokens',
-      'A3',
-      'mv_tokens_eu-v1',
-      'am_tokens',
-      'am_tokens_eu-v1',
-      'iteo'
-    ],
-    Facebook: ['_fbp'],
-    ['Google Analytics']: [
-      ...GOOGLE_BUNDLE_COOKIES
-    ],
-    Hotjar: ['hotjar'],
-    Microsoft: ['_clck', '_clsk', '_uetsid', '_uetvid']
+    PugT: {name: 'PubMatic' },
+    locale: {name: 'Personio' },
+    uid: { name: 'criteo' },
+    callback: { name: 'callback' },
+    demdex: { name: 'demdex' },
+    vuid: { name: 'Vimeo' },
+    _fbp: { name: 'Facebook' },
+    hotjar: { name: 'Hotjar-Analytics'},
+    _clck: { name: 'Clarity' },
+    _clsk: { name: 'Clarity' },
+    _uetsid: { name: 'Microsoft-Werbeausrichtung' },
+    _uetvid: { name: 'Microsoft-Werbeausrichtung' },
+    sentry: { name: 'Sentry' },
+    ...GOOGLE_BUNDLE_COOKIES
   },
   marketing: {
-    ['auto.de']: [
-      'cf',
-      'cip',
-      'cnac',
-      'car'
-    ],
-    Awin: [
-      'bid'
-    ],
-    Google: [
-      'test_cookie',
-      'IDE',
-    ],
-    Youtube: [
-      'youtube'
-    ]
+    test_cookie: { name: 'doubleclick.net' },
+    tuuid: { name: '360yield.com' },
+    tuuid_lu: { name: '360yield.com' },
+    c: { name: 'bidswitch.net' },
+    CMID: { name: 'casalemedia.com' },
+    CMPS: { name: 'casalemedia.com' },
+    CMPRO: { name: 'casalemedia.com' },
+    uuid2: { name: 'adnxs.com' },
+    IDE: { name: 'Google DoubleClick' },
+    um: { name: '360yield.com' },
+    umeh: { name: '360yield.com' },
+    cf: { name: 'id5-sync.com' },
+    cip: { name: 'id5-sync.com' },
+    cnac: { name: 'id5-sync.com' },
+    car: { name: 'id5-sync.com' },
+    KRTBCOOKIE_97: { name: 'PubMatic' },
+    IDSYNC: { name: 'analytics.yahoo.com' },
+    dpm: { name: 'Demdex' },
+    _kuid_: { name: 'Krux' },
+    cto_bundle: { name: 'Criteo' },
+    ['visitor-id']: { name: 'media.net' },
+    ['data-c-ts']: { name: 'media.net' },
+    ['data-c']: { name: 'media.net' },
+    CMTS: { name: 'casalemedia.com' },
+    ['mv_tokens']: { name: 'mediavine' },
+    A3: { name: 'yahoo.com' },
+    ['mv_tokens_eu-v1']: { name: 'mediavine' },
+    am_tokens: { name: 'mediavine' },
+    ['am_tokens_eu-v1']: { name: 'mediavine' },
+    iteo: { name: 'mediavine' },
+    MyVerivoxAuth: { name: 'www.verivox.de' },
+    VxCheckAuth: { name: 'www.verivox.de' }
   }
 };
 

package/source/framework/constants/highlights.ts

@@ -4,7 +4,7 @@ import { selectors } from '@bytebrand/car-schema-selectors';
 export const climatisation = {
   key: 'heatingCooling_climatisation',
   climatisationKeys: [
-    // 'selector_climatisation_no_airCondition',
+    'selector_climatisation_no_airCondition',
     'selector_climatisation_airCondition',
     'selector_climatisation_automaticAirCondition',
     'selector_climatisation_2_automaticAirCondition',

package/source/framework/constants.ts

@@ -59,7 +59,7 @@ export const offers = [
     name: 'financing',
     periods: [12, 24, 36, 48, 60, 72, 84, 96],                      // tslint:disable-line
     sliders: [
-      { name: 'firstInstallment', min: 0, step: 100, unit: 'euro', withRangeLimit: true },              // tslint:disable-line
+      { name: 'firstInstallment', min: 0, step: 100, unit: 'euro' },              // tslint:disable-line
       { name: 'annualMileage', min: 5000, max: 60000, step: 5000, unit: 'km' }  // tslint:disable-line
     ]
   },

package/source/framework/types/types.ts

@@ -32,7 +32,6 @@ export interface IImage {
   isSimpleTemp: boolean;
   isInProcessing: boolean;
   isTemp: boolean;
-  videoUrl:string;          // youtube link that can be used in src in youtube video,
 }
 
 export interface IPrice {
@@ -97,7 +96,7 @@ export interface IVehicleInfo {
   linkTag?: string;
   mlCurrentSalesPricePredicted?: number;
   location?: IVehicleLocation;
-  common?: {
+  common: {
     currentSalesPrice?: number;
     isStrikeShown?: boolean;
   };
@@ -188,9 +187,7 @@ export interface IVehicleDetailedSidebarPriceProps {
   isAlternative?: boolean;
   // currentSalesPrice?: number;
   originalSalesPrice?: number;
-  common?: { isStrikeShown?: boolean, currentSalesPrice?: number };
-  financing?: any;
-  currentSalesPrice?: number;
+  common: { isStrikeShown?: boolean, currentSalesPrice?: number };
 }
 export interface ITabsProps {
   t?: (key: string, options?: object) => string;
@@ -251,8 +248,6 @@ export interface IVehicleDetailedSidebarProps {
   infoSections: { title: string, value: string, icon?: string }[];
   isAlternative?: boolean;
   onCurrentSalesPriceChange: (price: number) => void;
-  className?: string;
-  isFetching?: boolean;
 }
 
 interface IOfferRequestButtonWrapper {
@@ -345,7 +340,7 @@ export interface IVehicleCompareProps {
   onRemoveClick: () => void;
 }
 
-export interface ITFunction {
+export interface TFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
-}
+}