@bytebrand/fe-ui-core 4.3.0 → 4.4.0

package/source/components/_common/UserMenu/MaterialMenuItem.tsx

@@ -10,37 +10,59 @@ interface IListItem {
   label: any;
   amount?: number;
   divider?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
   href?: string;
   isComponent?: boolean;
   isSelect?: boolean;
   Link?: any;
   handleClose?: () => void;
   isActive?: boolean;
+  isExternalLink?: boolean;
 }
 
-const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive }: IListItem) => {
-  return !!href ? (
-    <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
-      <MenuItem
-        divider={divider}
-      >
-        {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
-        <ListItemText>
-          {label}
-        </ListItemText>
-        {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
-      </MenuItem>
-    </Link>
-  ) : (
+const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose, isActive, isExternalLink }: IListItem) => {
+
+  const onMenuItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
+    onClick(e);
+    handleClose();
+  };
+
+  const renderLink = () => {
+    return (
+      <>
+        {isExternalLink ? (
+          <a href={href}>
+            <MenuItem
+              divider={divider}
+            >
+              {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+              <ListItemText>
+                {label}
+              </ListItemText>
+              {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
+            </MenuItem>
+          </a>
+        ) : (
+          <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
+            <MenuItem divider={divider}>
+              {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+              <ListItemText>
+                {label}
+              </ListItemText>
+              {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
+            </MenuItem>
+          </Link>
+        )}
+      </>
+    )
+  }
+
+  return !!href ? renderLink() : (
     <MenuItem
-      onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
-        onClick(e);
-        handleClose();
-      }}
+      onClick={onMenuItemClick}
       divider={divider}
       disableRipple={isComponent ? true : false}
-      isactive={!!isActive ? isActive.toString() : 'false'}
+      selected={!!isActive ? isActive : false}
     >
       {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
       <ListItemText>

package/source/components/_common/UserMenu/NestedMenu.tsx

@@ -17,7 +17,7 @@ export interface INestedMenuProps {
 const NestedMenu = ({ nestedItems, label, icon, amount }: INestedMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {

package/source/components/_common/withStats/withStats.styl

@@ -148,3 +148,6 @@ $indent = 10px
 
 .new
   text-transform: uppercase
+
+.imagesCount
+  margin-left: 0 !important

package/source/components/_common/withStats/withStats.tsx

@@ -71,7 +71,7 @@ const withStats = (WrappedComponent: any) => ({
     const delimiters = { xs: '|', sm: '|', md: 'von' };
 
     return (
-      <div className={styles.section}>
+      <div className={classnames(styles.section, styles.imagesCount)}>
         {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
         {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
       </div>
@@ -79,7 +79,7 @@ const withStats = (WrappedComponent: any) => ({
   };
 
   const renderRotateSvg = (): JSX.Element => {
-    const hasExteriorPhotos = hasInteriorExteriorPhoto && Array.isArray(images) && images.length > 0;
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
     if (!hasExteriorPhotos) return null;
     return (
       <div className={styles.section}>
@@ -115,20 +115,23 @@ const withStats = (WrappedComponent: any) => ({
     const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
 
     return (
-      <div className={styles.section}>
-        {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
-          <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
-          <span>
-            {totalCarImpCount}
-          </span>
-        </div> : null}
-        {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-          <IconSVG name='star' customDimensions className={favoritesIconClassName} />
-          <span>
-            {totalFavCount}
-          </span>
-        </div> : null}
-      </div>
+      <>
+        {(!!totalCarImpCount || !!totalFavCount) && <div className={styles.section}>
+            {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+              <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+              <span>
+                {totalCarImpCount}
+              </span>
+            </div> : null}
+            {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+              <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+              <span>
+                {totalFavCount}
+              </span>
+            </div> : null}
+          </div>
+        }
+      </>
     );
   };
 

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

@@ -52,4 +52,17 @@
   font-weight: 700
   font-size: 14px
   border-bottom-left-radius: 10px;
-  border-bottom-right-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

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

@@ -3,16 +3,17 @@ import _get from 'lodash/get';
 import _startsWith from 'lodash/startsWith';
 import _debounce from 'lodash/debounce';
 import qs from 'qs';
-import { isEqual } from 'lodash';
+import { isArray, 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, SUB_MODEL_KEY } from '../../../../framework/constants/Search';
+import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME } 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;
@@ -33,7 +34,7 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   aggregation: {};
   setActiveSorting: (newActiveSorting: string) => void;
   setLastSearchString: (filters: IFilters, query: string) => void;
-  search: (filters: any, page?: number, getStats?: boolean) => void;
+  search: (filters: any, page?: number, getStats?: boolean, vehicleID?: string|null) => void;
   resetFiltersToDefault: () => void;
   clearSearchState: (clearSorting?: boolean) => void;
   addMmsGroup: () => void;
@@ -54,6 +55,7 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   t?: (phrase: string) => string;
   isDealerPage?: boolean;
   isAlternative?: boolean;
+  vehicleID?: string;
   successTransition?: boolean;
   isErrorAlternativeField: boolean;
   Link?: any;
@@ -66,8 +68,12 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   }
 
   componentDidUpdate(prevProps: IFiltersContainerProps) {
-    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting } = this.props;
-    if ((prevProps.location.search !== location.search) && !_startsWith(location.search, '?pageNumber')) {
+    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 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 });
@@ -83,11 +89,11 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
       if (activeSort !== activeSorting) {
         // activeSorting = activeSort; // TODO make a function to change at searchStore
-        setActiveSorting(activeSort);
+        setActiveSorting(activeSort as string);
       }
 
       clearSearchState(!activeSort);
-      search(filters, pageNumber || 1, true);
+      search(filters, Number(pageNumber) || 1, true, vehicleID);
     }
 
     this.updateFinancingSearchConfig();
@@ -194,41 +200,46 @@ 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
-          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);
-                });
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.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);
+                  });
+                }
+              });
             });
-          });
+          }
         } else if (filter === MM_GROUPS_EXCLUDE_KEY) {
-          paramValue.map((group: any, index: number) => {
-            if (index >= 1) {
-              addMmExcludeGroup();
-            }
+          if (isArray(paramValue)) {
+            const stringParamValue: string[] = paramValue as string[];
+            stringParamValue.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, { ignoreQueryPrefix: true }) : paramValue;
-          changeFilterValue(filter, valueToSend);
+          const valueToSend = isRange ? qs.parse(paramValue as string, { ignoreQueryPrefix: true }) : paramValue;
+          changeFilterValue(filter, valueToSend as string);
           if (isRange || isObject) { changeRangeFilterControls(filter, valueToSend); }
         }
       });
@@ -303,7 +314,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (isHistogram) {
       const histogramData = histograms[filterField].length ? histograms[filterField] : RANGE_FILTERS[filter].options;
       const actualValues = {
-        from: histogramData[0].from,
+        from: filters[filter].value.from ? filters[filter].value.from : histogramData[0].from,
         to: histogramData[histogramData.length - 1].to
       };
 
@@ -377,24 +388,37 @@ 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 } = this.props;
+    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition, filters } = this.props;
     const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
+
+    const { VEHICLE_ID } = filters;
+
     const alternativeIDProps = {
       t,
       successTransition,
-      autoDeId: paramsFromQuery.autoDeId,
+      autoDeId: paramsFromQuery.autoDeId as string,
       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>
@@ -404,8 +428,19 @@ 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>
     );
   }
@@ -419,9 +454,10 @@ const removeUnknownOptions = (options: any) => {
 // export default React.memo(FiltersContainer);
 
 export default React.memo(FiltersContainer, (props, nextProps) => {
-  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)
-});
+  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);
+});

package/source/framework/constants/common.ts

@@ -8,74 +8,103 @@ export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
 
 export const HUNDRED = 100;
 
-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' }
-};
+export const GOOGLE_BUNDLE_COOKIES = [
+  'analytics_storage',
+  'ad_storage',
+  'functionality_storage',
+  'personalization_storage',
+  'security_storage'
+];
 
 /* 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: {
-    __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' }
+    ['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: ['']
   },
   analytics: {
-    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
+    ['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']
   },
   marketing: {
-    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' }
+    ['auto.de']: [
+      'cf',
+      'cip',
+      'cnac',
+      'car'
+    ],
+    Awin: [
+      'bid'
+    ],
+    Google: [
+      'test_cookie',
+      'IDE',
+    ],
+    Youtube: [
+      'youtube'
+    ]
   }
 };
 

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' },              // tslint:disable-line
+      { name: 'firstInstallment', min: 0, step: 100, unit: 'euro', withRangeLimit: true },              // tslint:disable-line
       { name: 'annualMileage', min: 5000, max: 60000, step: 5000, unit: 'km' }  // tslint:disable-line
     ]
   },

package/source/framework/types/types.ts

@@ -32,6 +32,7 @@ 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 {
@@ -96,7 +97,7 @@ export interface IVehicleInfo {
   linkTag?: string;
   mlCurrentSalesPricePredicted?: number;
   location?: IVehicleLocation;
-  common: {
+  common?: {
     currentSalesPrice?: number;
     isStrikeShown?: boolean;
   };
@@ -187,7 +188,9 @@ export interface IVehicleDetailedSidebarPriceProps {
   isAlternative?: boolean;
   // currentSalesPrice?: number;
   originalSalesPrice?: number;
-  common: { isStrikeShown?: boolean, currentSalesPrice?: number };
+  common?: { isStrikeShown?: boolean, currentSalesPrice?: number };
+  financing?: any;
+  currentSalesPrice?: number;
 }
 export interface ITabsProps {
   t?: (key: string, options?: object) => string;
@@ -248,6 +251,8 @@ export interface IVehicleDetailedSidebarProps {
   infoSections: { title: string, value: string, icon?: string }[];
   isAlternative?: boolean;
   onCurrentSalesPriceChange: (price: number) => void;
+  className?: string;
+  isFetching?: boolean;
 }
 
 interface IOfferRequestButtonWrapper {
@@ -340,7 +345,7 @@ export interface IVehicleCompareProps {
   onRemoveClick: () => void;
 }
 
-export interface TFunction {
+export interface ITFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
-}
+}