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

package/compat/withStats/withStats.tsx

@@ -1,238 +1,238 @@
-import React from 'react';
-import classnames from 'classnames';
-
-import IconSVG from '../../iconsvg/IconSVG';
-import Badge from '../Badge/Badge';
-import FormattedNumber from '../FormattedNumber/FormattedNumber';
-
-import styles from './withStats.styl';
-
-export interface IStatsData {
-  totalCarImpCount: number;
-  totalFavCount: number;
-}
-
-type TStatsSize = 'xs' | 'sm' | 'md';
-
-export type TPrice = {
-  currency?: string;
-  amount?: number;
-  oldPrice?: number;
-  historyPriceDifference?: number;
-  historyPriceDifferencePerCent?: number;
-  vatRate?: number | null;
-  financing?: { firstInstallment?: number; [key: string]: any };
-  leasing?: { firstInstallment?: number; [key: string]: any };
-};
-
-export interface IStatsWrapperProps {
-  t?: (key: string, options?: object) => string;
-  statsSize?: TStatsSize;
-  price?: TPrice;
-  isFavoured?: boolean;
-  statsData?: IStatsData;
-  imagesCount?: number;
-  showNewLabel?: boolean;
-  showDownPayment?: boolean;
-  disableDownPaymentLocalStorage?: boolean;
-  onFavoriteClick?: (event: any) => void;
-  getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
-  [key: string]: any;
-}
-
-const withStats = (WrappedComponent: any) => ({
-  t,
-  images,
-  hasInteriorExteriorPhoto,
-  imagesCount,
-  statsData,
-  isFavoured,
-  onFavoriteClick,
-  isReferenceSearch,
-  onSlideChange,
-  classWrapPrice = '',
-  showNewLabel = false,
-  showDownPayment = false,
-  disableDownPaymentLocalStorage = false,
-  statsSize = 'xs',
-  price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
-  ...props
-}: IStatsWrapperProps) => {
-  const [activeSlide, setActiveSlide] = React.useState<number>(0);
-  const [isWideScreen, setIsWideScreen] = React.useState<boolean>(
-    typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)').matches : false
-  );
-
-  React.useEffect(() => {
-    const mq = window.matchMedia('(min-width: 992px)');
-    const handler = (e: MediaQueryListEvent) => setIsWideScreen(e.matches);
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-
-  const MIN_PERCENT = 5;
-  const MIN_PRICE_DIFFERENCE = 500;
-
-  const [showByLocalStorage, setShowByLocalStorage] = React.useState(false);
-  const [anyLsBlocked, setAnyLsBlocked] = React.useState(false);
-
-  React.useEffect(() => {
-    const raw = localStorage.getItem('financing_store');
-    const parsed = raw ? JSON.parse(raw) : null;
-    const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
-    const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
-    const finBlocked = fin !== undefined && fin !== null && fin !== 0;
-    const leaBlocked = lea !== undefined && lea !== null && lea !== 0;
-    const anyBlocked = finBlocked || leaBlocked;
-    const hasZero = fin === 0 || lea === 0;
-    setAnyLsBlocked(anyBlocked);
-    setShowByLocalStorage(hasZero && !anyBlocked);
-  }, []);
-
-  const showByBackend = disableDownPaymentLocalStorage
-    ? !!showDownPayment
-    : showDownPayment && !anyLsBlocked;
-  const effectiveShowByLocalStorage = disableDownPaymentLocalStorage ? false : showByLocalStorage;
-
-  const onHandleSlideChange = (activeSlide: number) => {
-    setActiveSlide(activeSlide);
-
-    if (typeof onSlideChange === 'function') {
-      onSlideChange(activeSlide);
-    }
-  };
-
-  const renderImagesData = (): JSX.Element => {
-    if (!Number.isFinite(imagesCount)) return null;
-
-    const delimiters = { xs: '|', sm: '|', md: 'von' };
-
-    return (
-      <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>
-    );
-  };
-
-  const renderRotateSvg = (): JSX.Element => {
-    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
-    if (!hasExteriorPhotos) return null;
-    return (
-      <div className={styles.section}>
-        {hasExteriorPhotos ? (
-          <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
-        ) : null}
-      </div>
-    );
-  };
-
-  const renderStarButton = () => {
-    if (!onFavoriteClick) return null;
-
-    return (
-      <IconSVG
-        name='common_StarRoundedCorners'
-        customDimensions
-        className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
-        onClick={onFavoriteClick}
-      />
-    );
-  };
-
-  const renderStatsData = (): JSX.Element => {
-    if (!statsData) return null;
-    const { totalCarImpCount, totalFavCount } = statsData;
-    const favoritesClassName = classnames(
-      styles.statsFavoritesCount,
-      {
-        [styles.accented]: isFavoured,
-        [styles.clickable]: typeof onFavoriteClick === 'function'
-      });
-    const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
-
-    return (
-      <>
-        {(!!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>
-        }
-      </>
-    );
-  };
-
-  const renderPriceData = () => {
-    const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
-    const downPaymentText = !!t ? t('vehicleProps:promoSlider.downPayment') : '0\u20AC Anzahlung';
-    const downPaymentShortText = !!t ? t('vehicleProps:promoSlider.downPaymentShort') : '0\u20AC Anz.';
-    const EUR = `\u20AC`;
-
-    const allFourActive = showNewLabel
-      && !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE
-      && (effectiveShowByLocalStorage || showByBackend)
-      && !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT;
-
-    const activeBadgesCount = [
-      showNewLabel,
-      !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE,
-      effectiveShowByLocalStorage || showByBackend,
-      !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT
-    ].filter(Boolean).length;
-
-    return (
-      <div className={classnames(styles.topWrapper, classWrapPrice, { [styles.fourBadges]: allFourActive })}>
-        {showNewLabel && <Badge type='blue' className={classnames(styles.new, styles.badgeItem)}>{newText}</Badge>}
-        {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-          <Badge type='green' className={styles.badgeItem}>
-            {`-`}
-            <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
-            {` ${EUR}`}
-          </Badge>
-        )}
-        {(effectiveShowByLocalStorage || showByBackend) && (
-          <Badge type='lightBlue' className={styles.badgeItem}>
-            {isWideScreen && activeBadgesCount >= 3 ? downPaymentShortText : downPaymentText}
-          </Badge>
-        )}
-        {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
-          <Badge type='red' className={classnames(styles.priceDifferencePerCent, styles.badgeItem)}>-{historyPriceDifferencePerCent}%</Badge>
-        )}
-      </div>
-    );
-  };
-
-  const wrappedComponentProps = {
-    t,
-    images,
-    hasInteriorExteriorPhoto,
-    imagesCount,
-    classWrapPrice,
-    ...props
-  };
-
-  return (
-    <div className={styles.wrapper}>
-      {!isReferenceSearch && renderPriceData()}
-      <WrappedComponent onSlideChange={onHandleSlideChange} isReferenceSearch={isReferenceSearch} {...wrappedComponentProps} />
-      <div className={classnames(styles.controls, styles[statsSize])}>
-        {renderImagesData()}
-        {renderRotateSvg()}
-        {renderStarButton()}
-        {renderStatsData()}
-      </div>
-    </div>
-  );
-};
-
-export default withStats;
+import React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../iconsvg/IconSVG';
+import Badge from '../Badge/Badge';
+import FormattedNumber from '../FormattedNumber/FormattedNumber';
+
+import styles from './withStats.styl';
+
+export interface IStatsData {
+  totalCarImpCount: number;
+  totalFavCount: number;
+}
+
+type TStatsSize = 'xs' | 'sm' | 'md';
+
+export type TPrice = {
+  currency?: string;
+  amount?: number;
+  oldPrice?: number;
+  historyPriceDifference?: number;
+  historyPriceDifferencePerCent?: number;
+  vatRate?: number | null;
+  financing?: { firstInstallment?: number; [key: string]: any };
+  leasing?: { firstInstallment?: number; [key: string]: any };
+};
+
+export interface IStatsWrapperProps {
+  t?: (key: string, options?: object) => string;
+  statsSize?: TStatsSize;
+  price?: TPrice;
+  isFavoured?: boolean;
+  statsData?: IStatsData;
+  imagesCount?: number;
+  showNewLabel?: boolean;
+  showDownPayment?: boolean;
+  disableDownPaymentLocalStorage?: boolean;
+  onFavoriteClick?: (event: any) => void;
+  getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
+  [key: string]: any;
+}
+
+const withStats = (WrappedComponent: any) => ({
+  t,
+  images,
+  hasInteriorExteriorPhoto,
+  imagesCount,
+  statsData,
+  isFavoured,
+  onFavoriteClick,
+  isReferenceSearch,
+  onSlideChange,
+  classWrapPrice = '',
+  showNewLabel = false,
+  showDownPayment = false,
+  disableDownPaymentLocalStorage = false,
+  statsSize = 'xs',
+  price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
+  ...props
+}: IStatsWrapperProps) => {
+  const [activeSlide, setActiveSlide] = React.useState<number>(0);
+  const [isWideScreen, setIsWideScreen] = React.useState<boolean>(
+    typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)').matches : false
+  );
+
+  React.useEffect(() => {
+    const mq = window.matchMedia('(min-width: 992px)');
+    const handler = (e: MediaQueryListEvent) => setIsWideScreen(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const MIN_PERCENT = 5;
+  const MIN_PRICE_DIFFERENCE = 500;
+
+  const [showByLocalStorage, setShowByLocalStorage] = React.useState(false);
+  const [anyLsBlocked, setAnyLsBlocked] = React.useState(false);
+
+  React.useEffect(() => {
+    const raw = localStorage.getItem('financing_store');
+    const parsed = raw ? JSON.parse(raw) : null;
+    const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
+    const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
+    const finBlocked = fin !== undefined && fin !== null && fin !== 0;
+    const leaBlocked = lea !== undefined && lea !== null && lea !== 0;
+    const anyBlocked = finBlocked || leaBlocked;
+    const hasZero = fin === 0 || lea === 0;
+    setAnyLsBlocked(anyBlocked);
+    setShowByLocalStorage(hasZero && !anyBlocked);
+  }, []);
+
+  const showByBackend = disableDownPaymentLocalStorage
+    ? !!showDownPayment
+    : showDownPayment && !anyLsBlocked;
+  const effectiveShowByLocalStorage = disableDownPaymentLocalStorage ? false : showByLocalStorage;
+
+  const onHandleSlideChange = (activeSlide: number) => {
+    setActiveSlide(activeSlide);
+
+    if (typeof onSlideChange === 'function') {
+      onSlideChange(activeSlide);
+    }
+  };
+
+  const renderImagesData = (): JSX.Element => {
+    if (!Number.isFinite(imagesCount)) return null;
+
+    const delimiters = { xs: '|', sm: '|', md: 'von' };
+
+    return (
+      <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>
+    );
+  };
+
+  const renderRotateSvg = (): JSX.Element => {
+    const hasExteriorPhotos = hasInteriorExteriorPhoto && imagesCount > 0;
+    if (!hasExteriorPhotos) return null;
+    return (
+      <div className={styles.section}>
+        {hasExteriorPhotos ? (
+          <IconSVG name='rotate360New' customDimensions className={styles.statsEyeIcon} />
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderStarButton = () => {
+    if (!onFavoriteClick) return null;
+
+    return (
+      <IconSVG
+        name='common_StarRoundedCorners'
+        customDimensions
+        className={classnames(styles.starButton, { [styles.starButtonFavored]: isFavoured })}
+        onClick={onFavoriteClick}
+      />
+    );
+  };
+
+  const renderStatsData = (): JSX.Element => {
+    if (!statsData) return null;
+    const { totalCarImpCount, totalFavCount } = statsData;
+    const favoritesClassName = classnames(
+      styles.statsFavoritesCount,
+      {
+        [styles.accented]: isFavoured,
+        [styles.clickable]: typeof onFavoriteClick === 'function'
+      });
+    const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
+
+    return (
+      <>
+        {(!!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>
+        }
+      </>
+    );
+  };
+
+  const renderPriceData = () => {
+    const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
+    const downPaymentText = !!t ? t('vehicleProps:promoSlider.downPayment') : '0\u20AC Anzahlung';
+    const downPaymentShortText = !!t ? t('vehicleProps:promoSlider.downPaymentShort') : '0\u20AC Anz.';
+    const EUR = `\u20AC`;
+
+    const allFourActive = showNewLabel
+      && !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE
+      && (effectiveShowByLocalStorage || showByBackend)
+      && !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT;
+
+    const activeBadgesCount = [
+      showNewLabel,
+      !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE,
+      effectiveShowByLocalStorage || showByBackend,
+      !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT
+    ].filter(Boolean).length;
+
+    return (
+      <div className={classnames(styles.topWrapper, classWrapPrice, { [styles.fourBadges]: allFourActive })}>
+        {showNewLabel && <Badge type='blue' className={classnames(styles.new, styles.badgeItem)}>{newText}</Badge>}
+        {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+          <Badge type='green' className={styles.badgeItem}>
+            {`-`}
+            <FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
+            {` ${EUR}`}
+          </Badge>
+        )}
+        {(effectiveShowByLocalStorage || showByBackend) && (
+          <Badge type='lightBlue' className={styles.badgeItem}>
+            {isWideScreen && activeBadgesCount >= 3 ? downPaymentShortText : downPaymentText}
+          </Badge>
+        )}
+        {!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
+          <Badge type='red' className={classnames(styles.priceDifferencePerCent, styles.badgeItem)}>-{historyPriceDifferencePerCent}%</Badge>
+        )}
+      </div>
+    );
+  };
+
+  const wrappedComponentProps = {
+    t,
+    images,
+    hasInteriorExteriorPhoto,
+    imagesCount,
+    classWrapPrice,
+    ...props
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      {!isReferenceSearch && renderPriceData()}
+      <WrappedComponent onSlideChange={onHandleSlideChange} isReferenceSearch={isReferenceSearch} {...wrappedComponentProps} />
+      <div className={classnames(styles.controls, styles[statsSize])}>
+        {renderImagesData()}
+        {renderRotateSvg()}
+        {renderStarButton()}
+        {renderStatsData()}
+      </div>
+    </div>
+  );
+};
+
+export default withStats;

package/constants/RateSearchWidget.ts

@@ -1,15 +1,15 @@
-
-export const FIRST_INSTALLMENT_FIX = [
-  0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, // tslint:disable-line
-  6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, // tslint:disable-line
-  17500, 20000, 22500, 25000, 27500, 30000, 35000, 40000, 45000, 50000 // tslint:disable-line
-];
-
-export const MONTHLY_INSTALLMENT_FIX = [
-  'any', 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 225, 250, 275, 300, 350, 400, 450, 500, // tslint:disable-line
-  550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1100, 1200, 1300, 1400, 1500 // tslint:disable-line
-];
-
-export const PAYBACK_PERIOD_FIX = [
-  12, 24, 36, 48, 60, 72, 84, 96 // tslint:disable-line
-];
+
+export const FIRST_INSTALLMENT_FIX = [
+  0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, // tslint:disable-line
+  6000, 7000, 8000, 9000, 10000, 11000, 12000, 13000, 14000, 15000, // tslint:disable-line
+  17500, 20000, 22500, 25000, 27500, 30000, 35000, 40000, 45000, 50000 // tslint:disable-line
+];
+
+export const MONTHLY_INSTALLMENT_FIX = [
+  'any', 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 225, 250, 275, 300, 350, 400, 450, 500, // tslint:disable-line
+  550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1100, 1200, 1300, 1400, 1500 // tslint:disable-line
+];
+
+export const PAYBACK_PERIOD_FIX = [
+  12, 24, 36, 48, 60, 72, 84, 96 // tslint:disable-line
+];