@bytebrand/fe-ui-core 4.2.250 → 4.3.0

package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styles from './RequestedCarsSection.styl';
 
 import Slider from 'react-slick';
@@ -10,8 +10,11 @@ import { getFormattedPrice } from '../../../../framework/utils/CommonUtils';
 // import { history } from '../../../../../AppRouter';
 import Button from '../../../_common/Button/Button';
 
+interface IWithRouter {
+  children?: JSX.Element;
+}
 // tslint:disable-next-line:interface-name
-interface ITFunction {
+interface TFunction {
   <T = string>(key: string, options?: object): T;
   <T = string>(keys: string[], options?: object): T;
 }
@@ -20,7 +23,7 @@ interface IRequestedCarsSection {
   redirectToCar: (id: string) => void;
   getSupportedImageFormat: (id: string, mainImageId: string, size: 'small' | 'medium' | 'large') => string;
   requestedCars: any[];
-  t: ITFunction;
+  t: TFunction;
   LinkRouter:any;
   // initHotjar:() => void;
 }
@@ -36,7 +39,7 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
   const renderItems = () => {
     if (requestedCars && requestedCars.length > 0) {
       const carsCard = requestedCars.map((car) => {
-        if (car && car.car.mainData && car.car.metaData) {
+        if (car && car.car) {
           const { car: { mainData: { make, model, subModel } } } = car;
           const { car: { _id, metaData: { mainImageId } } } = car;
           const { buyingType, paybackPeriod, monthlyInstallment, request, currentSalesPrice } = car;
@@ -120,5 +123,4 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
     </>
   );
 };
-
 export default RequestedCarsSection;

package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import * as React from 'react';
 import classnames from 'classnames';
 import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import styles from './VehicleFormattedPrice.styl';
@@ -23,7 +23,6 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
-  dynamicFontSize?: string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -35,36 +34,13 @@ export interface IVehiclePriceProps {
 }
 
 const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (props) => {
-  const textRef = useRef(null);
-
-  const updateFontSize = useCallback(() => {
-    if (price && dynamicFontSize && textRef.current) {
-      const textWidth = textRef.current.getBoundingClientRect().width;
-      const priceLength = Math.round(price).toString().length;
-      if (textWidth > 110) {
-        if (dynamicFontSize === 'small') {
-          const newSize = Math.min(60, 165 / priceLength);
-          textRef.current.style.fontSize = `${newSize}px`;
-        } else {
-          const newSize = Math.min(60, (165 / priceLength) + 6);
-          textRef.current.style.fontSize = `${newSize}px`;
-        }
-
-      }
-    }
-  }, [props.price, props.dynamicFontSize]);
-
-  useEffect(() => {
-    updateFontSize();
-  }, [updateFontSize]);
-
   function renderUnit(): React.ReactNode {
     const { postfix, unit, unitClassName } = props;
     return (
-      <span className={classnames(styles.unit, unitClassName)}>
-        &nbsp;{unit}
-        {postfix ? renderPostfix() : ''}
-      </span>);
+    <span className={classnames(styles.unit, unitClassName)}>
+      &nbsp;{unit}
+      {postfix ? renderPostfix() : ''}
+    </span>);
   }
 
   function renderUnitMonthly(): React.ReactNode {
@@ -102,7 +78,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, dynamicFontSize
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -118,7 +94,6 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
-    dynamicFontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -126,7 +101,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   };
 
   return (
-    <span className={containerClass} ref={textRef}>
+    <span className={containerClass}>
       {<FormattedNumber {...formattedNumberProps} />}
       {(unit && !monthly) && renderUnit()}
       {(monthly && unit) && renderUnitMonthly()}
@@ -150,7 +125,6 @@ VehicleFormattedPrice.defaultProps = {
   unitClassName: '',
   postfixClassName: '',
   subClassName: '',
-  dynamicFontSize: '',
   sub: '',
   // FormattedNumber props
   toRound: false,

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.styl

@@ -1,7 +1,7 @@
 @import '../../theme/mixins.styl'
 
 .detailedInfo
-  padding: 15px 15px 0px 15px
+  padding: 15px 15px 7px 15px
   width: 100%
   position: relative
   background-color: white
@@ -26,12 +26,4 @@
 
 .highlights
   padding-top: 0;
-  margin-top: 6px;
-
-.skeletonInfoContainer:not(:first-child)
-  margin-top: 6px
-
-.skeletonInfoContainer
-  [class*='MuiSkeleton-root']
-    transform: none
-    height: 309px
+  margin-top: 6px;

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 import _get from 'lodash/get';
 import { Hidden } from 'react-grid-system';
-import { isMobileOnly } from 'react-device-detect';
 import PriceContent from './partials/PriceContent';
 import Title from './partials/Title';
 import Price from './partials/Price';
@@ -10,15 +9,6 @@ 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 {
-  // interface Window {
-  //   Trustpilot?: {
-  //     loadFromElement: (element: HTMLElement, autoload?: boolean) => void;
-  //   };
-  // }
-}
 
 const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
   const {
@@ -36,10 +26,8 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     originUrl,
     // isAlternative,
     infoSections,
-    onCurrentSalesPriceChange,
-    isFetching
+    onCurrentSalesPriceChange
   } = props;
-  // const ref = useRef(null);
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
   const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
 
@@ -112,12 +100,6 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
-  // useEffect(() => {
-  //   if (window.Trustpilot) {
-  //     window.Trustpilot.loadFromElement(ref.current, true);
-  //   }
-  // }, []);
-
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
     if (!getlocalStorageActiveTabCDP) return;
@@ -147,34 +129,14 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
 
   return (
     <>
-      {!isFetching ? <div className={styles.detailedInfo}>
-          <Title {...titleProps} />
-          <Price {...priceProps} />
-          <Price {...priceProps} isSticky={true} />
-          {/* {isMobileOnly && (
-            <div
-              ref={ref}
-              data-locale='de-DE'
-              data-template-id='5419b6a8b0d04a076446a9ad'
-              data-businessunit-id='46edfd1c0000640005017f22'
-              data-style-height='32px'
-              data-style-width='100%'
-              data-theme='light'
-              data-style-alignment='center'
-            >
-              <a
-                href='https://de.trustpilot.com/review/www.auto.de'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                Trustpilot
-              </a>
-            </div>
-          )} */}
-          {props.children}
-        </div> : <div className={styles.skeletonInfoContainer}><Skeleton /></div>
-      }
-      {!isFetching ? <div>{isAlternativeType &&
+      <div className={styles.detailedInfo}>
+        <Title {...titleProps} />
+        <Price {...priceProps} />
+        <Price {...priceProps} isSticky={true} />
+        {props.children}
+      </div>
+      <div>
+        {isAlternativeType &&
           <DealerInfo
             t={t}
             infoSections={infoSections}
@@ -184,12 +146,10 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
             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>
-      }
+      </div>
+      <Hidden xs sm md>
+        <div className={`${styles.detailedInfo} ${styles.highlights}`}>{carLoaded && <Properties {...propertiesProps} />}</div>
+      </Hidden>
     </>
   );
 };

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

@@ -20,8 +20,4 @@
   transition: 0.45s;
   transition-timing-function: ease-out;
   transform: translateY(0);
-  opacity: 1;
-  box-shadow: 0px 5px 12px #4c4e64d1;
-
-.tabContent
-  padding-bottom: 7px
+  opacity: 1;

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

@@ -21,8 +21,7 @@ const Price: React.FunctionComponent<IVehicleDetailedSidebarPriceProps> = ({
   const tabsProps = {
     tabsTitles,
     onTabPriceSelect,
-    priceTabActiveIndex,
-    tabContentClassName: styles.tabContent
+    priceTabActiveIndex
   };
 
   return (

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

@@ -1,7 +1,7 @@
 @import '../../../theme/mixins.styl';
 
 .newFinancingPriceWrapper
-  width: 159px
+  width: 100%
   display: flex
   align-items: flex-start;
   color: $lightGreen;
@@ -10,7 +10,7 @@
     font-size: 60px;
     display flex;
     line-height: .8;
-    margin 8px 0 0 10px;
+    margin 8px 0 0 16px;
   [class^="VehicleFormattedPrice__decimals"], [class^="VehicleFormattedPrice__unit"]
     font-size: 16px !important;
     transform: none !important;
@@ -18,14 +18,13 @@
 .tabContentPaddingForBuy
   .newFinancingPriceWrapper
     [class*="VehicleFormattedPrice__large"]
+      font-size: 40px;
       margin-left: 0;
     +media-phone-only()
       [class*="VehicleFormattedPrice__large"]
+        font-size: 45px;
         margin-left: 3px;
 
-
-
-
 .tabContentPadding
   padding: 10px 10px 10px 10px;
   flex-direction: row
@@ -111,14 +110,4 @@
   transform: rotate(180deg);
 
 .wrapper
-  +media-tablet-landscape-up()
-   padding-right: 15px;
-
-.priceFontSizeSmall
-  .priceInfoLabel
-    margin-top:8px!important 
-  
-
-.tabContentPaddingForBuy.priceFontSizeSmall
-  .financingPriceItem
-      display: flex;
+  padding-right: 15px;

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

@@ -7,7 +7,6 @@ import styles from './PriceContent.styl';
 import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
 import PriceRating from '../../PriceRating/PriceRating';
 import RequestOffer from '../../_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper';
-import { getFormattedPrice } from '../../../../utils';
 
 const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
   t,
@@ -46,14 +45,11 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
     isAdditionalOption: true,
     onShowOfferDetails: offerBlockProps.onShowOfferDetails
   };
-  const priceFontSize: string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' : 'large') : '';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
-    { [styles.tabContentPaddingForBuy]: isBuy },
-    { [styles.priceFontSizeSmall]: priceFontSize === 'small' }
+    { [styles.tabContentPaddingForBuy]: isBuy }
   );
-
   return (
     <>
       <div className={tabContentPaddingClassName}>
@@ -94,12 +90,11 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
-                dynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy') ? 'large' : 'small'}
               />
             </div>
           ) : null}
         </span>
-        <div className={styles.wrapper}>
+        <div>
           <PriceRating {...priceRatingProps} />
           <span className={styles.priceInfo}>
             <span className={styles.priceInfoLabel} onClick={onAdjustRateClick}>
@@ -108,13 +103,13 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 className={styles.infoIcon}
                 customDimensions
               />
-              <span>{priceTabActiveIndex === 2 ? t('sidebar.serviceProducts') :  t('sidebar.adjustRate')}</span>
+              <span>{t('sidebar.adjustRate')}</span>
               <IconSVG name='menuArrow' className={`${styles.arrowDownIcon} ${offerBlockOpen ? styles.arrowUpIcon : ''}`} customDimensions />
             </span>
           </span>
         </div>
       </div>
-      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />}
+      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} /> }
       <RequestOffer {...requestOfferProps} />
     </>
   );

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

@@ -82,7 +82,7 @@ const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decorat
 
   const tabsTitles = [
     {
-      title: `${t(`sidebar.overview`)}`,
+      title: 'overview',
       children: (
         <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
           {mainProperties.map((property: any, index: number) => (

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -100,48 +100,3 @@
 
 .blurred
   filter: blur(3px)
-
-.frame 
-  aspect-ratio:4/3     
-  height: auto;
-  border-radius: 10px;
-  display: block;
-  border: none;
-
-.noYoutubeWrapper
-  margin: 82px auto 0;
-  width: 487px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  +media-phone-only()
-    margin: 40px auto 0;
-    width: 297px;
-
-  svg
-    +media-phone-only()
-      width: 79px;
-      height: 56px;
-
-  .youtubeCookiesText
-    font-size: 28px;
-    font-weight: 400;
-    line-height: 36px; 
-    margin:62px 0px 54px;
-    display: block;
-    text-align: center;
-    +media-phone-only()
-      margin: 36px auto 39px;
-      font-size:17px;
-      line-height: 21px
-
-  .btn  
-    height: 38px!important
-    +media-phone-only()
-      height: 30px!important
-      font-size:13px;
-
-  .btn:first-child
-    margin-right:22px!important
-    +media-phone-only()
-      margin-right:5px!important