@bytebrand/fe-ui-core 4.8.25 → 4.8.27

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

@@ -1,37 +1,37 @@
-@import '../../theme/mixins.styl'
-
-.detailedInfo
-  padding: 15px 15px 0px 15px
-  width: 100%
-  position: relative
-  background-color: white
-  box-sizing: border-box
-  height: auto
-  borderRadius()
-
-  [class*="MuiTabs-indicator"]
-    border-radius: 3px 3px 0px 0px;
-    background-color: $primary;
-    height: 3px
-
-  [class*="MuiButtonBase-root"]
-    min-height: auto;
-  // [class*="Mui-selected"]
-  //   color: $primary !important;
-  //   font-weight bold !important
-
-  +media-tablet-down()
-    padding-bottom: 0
-    padding-top: 0;
-
-.highlights
-  padding-top: 0;
-  margin-top: 6px;
-
-.skeletonInfoContainer:not(:first-child)
-  margin-top: 6px
-
-.skeletonInfoContainer
-  [class*='MuiSkeleton-root']
-    transform: none
+@import '../../theme/mixins.styl'
+
+.detailedInfo
+  padding: 15px 15px 0px 15px
+  width: 100%
+  position: relative
+  background-color: white
+  box-sizing: border-box
+  height: auto
+  borderRadius()
+
+  [class*="MuiTabs-indicator"]
+    border-radius: 3px 3px 0px 0px;
+    background-color: $primary;
+    height: 3px
+
+  [class*="MuiButtonBase-root"]
+    min-height: auto;
+  // [class*="Mui-selected"]
+  //   color: $primary !important;
+  //   font-weight bold !important
+
+  +media-tablet-down()
+    padding-bottom: 0
+    padding-top: 0;
+
+.highlights
+  padding-top: 0;
+  margin-top: 6px;
+
+.skeletonInfoContainer:not(:first-child)
+  margin-top: 6px
+
+.skeletonInfoContainer
+  [class*='MuiSkeleton-root']
+    transform: none
     height: 309px

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,175 +1,175 @@
-import React, { useState, useEffect, FunctionComponent } from 'react';
-import _get from 'lodash/get';
-import { Hidden } from 'react-grid-system';
-import PriceContent from './partials/PriceContent';
-import Title from './partials/Title';
-import Price from './partials/Price';
-import Properties from './partials/Properties';
-import styles from './VehicleDetailedSidebar.styl';
-import { vehicleProps } from '../../locales/data';
-import { IVehicleDetailedSidebarProps } from '../../framework/types/types';
-import DealerInfo from '../Alternative/DealerInfo';
-import { Skeleton } from '@mui/material';
-
-declare global {
-}
-
-const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
-  const {
-    t = (phrase: string) => _get(vehicleProps(car), phrase.replace(':', '.'), phrase),
-    title,
-    decoratedProps,
-    price,
-    car,
-    isPriceSticky,
-    language,
-    pathname,
-    activeTab,
-    setActiveTab,
-    carLoaded,
-    originUrl,
-    infoSections,
-    onCurrentSalesPriceChange,
-    isFetching
-  } = props;
-  const [offerBlockOpen, setOfferBlockOpen] = useState(false);
-  const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
-
-  const titleProps = { ...title };
-
-  const propertiesProps = {
-    t,
-    decoratedProps,
-    language,
-    car
-  };
-
-  const mainConfig = {
-    t,
-    car,
-    activeTab,
-    offerBlockOpen,
-    onAdjustRateClick,
-    isStrikeShown: price.common ? price.common.isStrikeShown : price.financing.isStrikeShown,
-    ...price
-  };
-
-  const financingConfig = {
-    ...mainConfig,
-    ..._get(price, 'financing', {}),
-    priceTabActiveIndex: 0,
-    postfix: '3',
-    prefixPrice: 'prefixPrice',
-    detailsText: 'financingDetalis'
-  };
-
-  const leasingConfig = {
-    ...mainConfig,
-    ..._get(price, 'leasing', {}),
-    priceTabActiveIndex: 1,
-    postfix: '1,3',
-    prefixPrice: 'prefixPrice',
-    detailsText: 'leasingDetalis'
-  };
-
-  const getBuyConfig = _get(price, 'buy', {});
-  const buyConfig = {
-    ...mainConfig,
-    ...getBuyConfig,
-    isBuy: true,
-    postfix: !!_get(price, 'vatRate') ? '1' : '',
-    priceTabActiveIndex: 2,
-    oldMonthlyInstallment: _get(getBuyConfig, 'highestPriceExtra', 0),
-    monthlyInstallment: _get(getBuyConfig, 'currentSalesPriceExtra', 0),
-    detailsText: null
-  };
-
-  const tabsTitles = [
-    {
-      title: t('vehicleProps:title.financing'),
-      children: <PriceContent {...financingConfig} />
-    },
-    {
-      title: t('vehicleProps:title.leasing'),
-      children: <PriceContent { ...leasingConfig} />,
-      isDisable: !_get(price, 'leasing.isActive', false)
-    },
-    {
-      title: t('vehicleProps:title.buy'),
-      children: <PriceContent { ...buyConfig} />
-    },
-    {
-      title: t('vehicleProps:title.abo'),
-      isDisable: true
-    }
-  ];
-
-  useEffect(() => {
-    const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
-    if (!getlocalStorageActiveTabCDP) return;
-    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
-      return title === getlocalStorageActiveTabCDP;
-    });
-    if (activeTab === -1) {
-      setActiveTab(null, 0);
-    } else {
-      setActiveTab(null, activeTab);
-    }
-    localStorage.removeItem('activeTabCDP');
-  }, [pathname, activeTab]); // tslint:disable-line:align
-
-  const priceProps = {
-    tabsTitles,
-    isPriceSticky,
-    onTabPriceSelect: setActiveTab,
-    priceTabActiveIndex: activeTab
-  };
-  const { price: { originalSalesPrice = 0 } = {} } = car;
-  const { currentSalesPrice = 0 } = price;
-  const dealerDomain = !!originUrl ? `${originUrl.split('/')[2]}` : '';
-  const dealerPrice = originalSalesPrice;
-
-  const isAlternativeType = !!car.metaData && !!car.metaData.type;
-
-  return (
-    <>
-      {!isFetching ? <div className={styles.detailedInfo}>
-          <Title {...titleProps} />
-          <Price {...priceProps} />
-          <Price {...priceProps} isSticky={true} />
-          {}
-          {props.children}
-        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-      {!isFetching ? <div>{isAlternativeType &&
-          <DealerInfo
-            t={t}
-            infoSections={infoSections}
-            dealerPrice={dealerPrice}
-            link={originUrl}
-            linkName={dealerDomain}
-            currentSalesPrice={currentSalesPrice}
-            onCurrentSalesPriceChange={onCurrentSalesPriceChange}
-          />}
-        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-      {!isFetching ? <Hidden xs sm md>
-          <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
-        </Hidden> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-    </>
-  );
-};
-
-VehicleDetailedSidebar.defaultProps = {
-  title: {
-    make: 'N/A',
-    model: 'N/A',
-    subModel: 'N/A',
-    powerKW: 0,
-    powerPS: 0,
-    isCarInFavorite: false
-  }
-};
-
-export default VehicleDetailedSidebar;
+import React, { useState, useEffect, FunctionComponent } from 'react';
+import _get from 'lodash/get';
+import { Hidden } from 'react-grid-system';
+import PriceContent from './partials/PriceContent';
+import Title from './partials/Title';
+import Price from './partials/Price';
+import Properties from './partials/Properties';
+import styles from './VehicleDetailedSidebar.styl';
+import { vehicleProps } from '../../locales/data';
+import { IVehicleDetailedSidebarProps } from '../../framework/types/types';
+import DealerInfo from '../Alternative/DealerInfo';
+import { Skeleton } from '@mui/material';
+
+declare global {
+}
+
+const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
+  const {
+    t = (phrase: string) => _get(vehicleProps(car), phrase.replace(':', '.'), phrase),
+    title,
+    decoratedProps,
+    price,
+    car,
+    isPriceSticky,
+    language,
+    pathname,
+    activeTab,
+    setActiveTab,
+    carLoaded,
+    originUrl,
+    infoSections,
+    onCurrentSalesPriceChange,
+    isFetching
+  } = props;
+  const [offerBlockOpen, setOfferBlockOpen] = useState(false);
+  const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
+
+  const titleProps = { ...title };
+
+  const propertiesProps = {
+    t,
+    decoratedProps,
+    language,
+    car
+  };
+
+  const mainConfig = {
+    t,
+    car,
+    activeTab,
+    offerBlockOpen,
+    onAdjustRateClick,
+    isStrikeShown: price.common ? price.common.isStrikeShown : price.financing.isStrikeShown,
+    ...price
+  };
+
+  const financingConfig = {
+    ...mainConfig,
+    ..._get(price, 'financing', {}),
+    priceTabActiveIndex: 0,
+    postfix: '3',
+    prefixPrice: 'prefixPrice',
+    detailsText: 'financingDetalis'
+  };
+
+  const leasingConfig = {
+    ...mainConfig,
+    ..._get(price, 'leasing', {}),
+    priceTabActiveIndex: 1,
+    postfix: '1,3',
+    prefixPrice: 'prefixPrice',
+    detailsText: 'leasingDetalis'
+  };
+
+  const getBuyConfig = _get(price, 'buy', {});
+  const buyConfig = {
+    ...mainConfig,
+    ...getBuyConfig,
+    isBuy: true,
+    postfix: !!_get(price, 'vatRate') ? '1' : '',
+    priceTabActiveIndex: 2,
+    oldMonthlyInstallment: _get(getBuyConfig, 'highestPriceExtra', 0),
+    monthlyInstallment: _get(getBuyConfig, 'currentSalesPriceExtra', 0),
+    detailsText: null
+  };
+
+  const tabsTitles = [
+    {
+      title: t('vehicleProps:title.financing'),
+      children: <PriceContent {...financingConfig} />
+    },
+    {
+      title: t('vehicleProps:title.leasing'),
+      children: <PriceContent { ...leasingConfig} />,
+      isDisable: !_get(price, 'leasing.isActive', false)
+    },
+    {
+      title: t('vehicleProps:title.buy'),
+      children: <PriceContent { ...buyConfig} />
+    },
+    {
+      title: t('vehicleProps:title.abo'),
+      isDisable: true
+    }
+  ];
+
+  useEffect(() => {
+    const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
+    if (!getlocalStorageActiveTabCDP) return;
+    const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
+      return title === getlocalStorageActiveTabCDP;
+    });
+    if (activeTab === -1) {
+      setActiveTab(null, 0);
+    } else {
+      setActiveTab(null, activeTab);
+    }
+    localStorage.removeItem('activeTabCDP');
+  }, [pathname, activeTab]); // tslint:disable-line:align
+
+  const priceProps = {
+    tabsTitles,
+    isPriceSticky,
+    onTabPriceSelect: setActiveTab,
+    priceTabActiveIndex: activeTab
+  };
+  const { price: { originalSalesPrice = 0 } = {} } = car;
+  const { currentSalesPrice = 0 } = price;
+  const dealerDomain = !!originUrl ? `${originUrl.split('/')[2]}` : '';
+  const dealerPrice = originalSalesPrice;
+
+  const isAlternativeType = !!car.metaData && !!car.metaData.type;
+
+  return (
+    <>
+      {!isFetching ? <div className={styles.detailedInfo}>
+          <Title {...titleProps} />
+          <Price {...priceProps} />
+          <Price {...priceProps} isSticky={true} />
+          {}
+          {props.children}
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <div>{isAlternativeType &&
+          <DealerInfo
+            t={t}
+            infoSections={infoSections}
+            dealerPrice={dealerPrice}
+            link={originUrl}
+            linkName={dealerDomain}
+            currentSalesPrice={currentSalesPrice}
+            onCurrentSalesPriceChange={onCurrentSalesPriceChange}
+          />}
+        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+      {!isFetching ? <Hidden xs sm md>
+          <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
+        </Hidden> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
+      }
+    </>
+  );
+};
+
+VehicleDetailedSidebar.defaultProps = {
+  title: {
+    make: 'N/A',
+    model: 'N/A',
+    subModel: 'N/A',
+    powerKW: 0,
+    powerPS: 0,
+    isCarInFavorite: false
+  }
+};
+
+export default VehicleDetailedSidebar;

package/source/components/VehicleDetailedSidebar/partials/Price.styl

@@ -1,27 +1,27 @@
-@import '../../../theme/mixins.styl';
-
-.priceFixed
-  background-color: white
-  border-top: 1px solid $grey-e
-  position: fixed
-  width: 100%
-  bottom: 0;
-  left: 0
-  z-index: $zIndex-sticky
-  transition-timing-function: ease-in;
-  transition: 0.6s;
-  transform: translateY(100%);
-  opacity: 0;
-
-  & [role*='tabpanel']
-    padding 0 10px;
-
-.stickyShow
-  transition: 0.45s;
-  transition-timing-function: ease-out;
-  transform: translateY(0);
-  opacity: 1;
-  box-shadow: 0px 5px 12px #4c4e64d1;
-
-.tabContent
-  padding-bottom: 7px
+@import '../../../theme/mixins.styl';
+
+.priceFixed
+  background-color: white
+  border-top: 1px solid $grey-e
+  position: fixed
+  width: 100%
+  bottom: 0;
+  left: 0
+  z-index: $zIndex-sticky
+  transition-timing-function: ease-in;
+  transition: 0.6s;
+  transform: translateY(100%);
+  opacity: 0;
+
+  & [role*='tabpanel']
+    padding 0 10px;
+
+.stickyShow
+  transition: 0.45s;
+  transition-timing-function: ease-out;
+  transform: translateY(0);
+  opacity: 1;
+  box-shadow: 0px 5px 12px #4c4e64d1;
+
+.tabContent
+  padding-bottom: 7px

package/source/components/VehicleDetailedSidebar/partials/Price.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import classnames from 'classnames';
-import _get from 'lodash/get';
-import { IVehicleDetailedSidebarPriceProps } from '../../../framework/types/types';
-import TabsComponent from '../../_common/Tabs/Tabs';
-import styles from './Price.styl';
-
-const Price: React.FunctionComponent<IVehicleDetailedSidebarPriceProps> = ({
-  priceTabActiveIndex,
-  isSticky,
-  onTabPriceSelect,
-  tabsTitles,
-  isPriceSticky
-}) => {
-  const tabsContainerPriceClassName = classnames(
-    styles.tabsContainerPrice,
-    { [styles.priceFixed]: isSticky },
-    { [styles.stickyShow]: isPriceSticky }
-  );
-
-  const tabsProps = {
-    tabsTitles,
-    onTabPriceSelect,
-    priceTabActiveIndex,
-    tabContentClassName: styles.tabContent
-  };
-
-  return (
-    <div className={tabsContainerPriceClassName}>
-      <TabsComponent {...tabsProps} />
-    </div>
-  );
-};
-
-Price.defaultProps = {
-  isSticky: false,
-  priceTabActiveIndex: 0,
-  isPriceSticky: false
-};
-
-export default Price;
+import React from 'react';
+import classnames from 'classnames';
+import _get from 'lodash/get';
+import { IVehicleDetailedSidebarPriceProps } from '../../../framework/types/types';
+import TabsComponent from '../../_common/Tabs/Tabs';
+import styles from './Price.styl';
+
+const Price: React.FunctionComponent<IVehicleDetailedSidebarPriceProps> = ({
+  priceTabActiveIndex,
+  isSticky,
+  onTabPriceSelect,
+  tabsTitles,
+  isPriceSticky
+}) => {
+  const tabsContainerPriceClassName = classnames(
+    styles.tabsContainerPrice,
+    { [styles.priceFixed]: isSticky },
+    { [styles.stickyShow]: isPriceSticky }
+  );
+
+  const tabsProps = {
+    tabsTitles,
+    onTabPriceSelect,
+    priceTabActiveIndex,
+    tabContentClassName: styles.tabContent
+  };
+
+  return (
+    <div className={tabsContainerPriceClassName}>
+      <TabsComponent {...tabsProps} />
+    </div>
+  );
+};
+
+Price.defaultProps = {
+  isSticky: false,
+  priceTabActiveIndex: 0,
+  isPriceSticky: false
+};
+
+export default Price;