@bytebrand/fe-ui-core 4.2.167 → 4.2.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.167",
+  "version": "4.2.169",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, FunctionComponent } from 'react';
+import React, { useState, useEffect, useRef, FunctionComponent } from 'react';
 import _get from 'lodash/get';
 import { Hidden } from 'react-grid-system';
 import PriceContent from './partials/PriceContent';
@@ -10,6 +10,14 @@ import { vehicleProps } from '../../locales/data';
 import { IVehicleDetailedSidebarProps } from '../../framework/types/types';
 import DealerInfo from '../Alternative/DealerInfo';
 
+declare global {
+  interface Window {
+    Trustpilot?: {
+      loadFromElement: (element: HTMLElement, autoload?: boolean) => void;
+    };
+  }
+}
+
 const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> = (props) => {
   const {
     t = (phrase: string) => _get(vehicleProps(car), phrase.replace(':', '.'), phrase),
@@ -28,6 +36,7 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     infoSections,
     onCurrentSalesPriceChange
   } = props;
+  const ref = useRef(null);
   const [offerBlockOpen, setOfferBlockOpen] = useState(false);
   const onAdjustRateClick = () => setOfferBlockOpen(!offerBlockOpen);
 
@@ -100,6 +109,12 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
     }
   ];
 
+  useEffect(() => {
+    if (window.Trustpilot) {
+      window.Trustpilot.loadFromElement(ref.current, true);
+    }
+  }, []);
+
   useEffect(() => {
     const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
     if (!getlocalStorageActiveTabCDP) return;
@@ -133,6 +148,24 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
         <Title {...titleProps} />
         <Price {...priceProps} />
         <Price {...priceProps} isSticky={true} />
+        <div
+          ref={ref}
+          data-locale='de-DE'
+          data-template-id='5419b6a8b0d04a076446a9ad'
+          data-businessunit-id='46edfd1c0000640005017f22'
+          data-style-height='42px'
+          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>

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -151,8 +151,10 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
 
-      return photos.map(({ imageUrlLarge, imageUrlSmall }: IImage, index: number) => {
+      return photos.map((item: IImage, index: number) => {
         const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
+        const imageUrlSmall = _get(item, 'imageUrlSmall', null);
+        const imageUrlLarge = _get(item, 'imageUrlLarge', null);
 
         this.imagesCache[currentSlide] = imageUrlLarge;
         this.imagesCache[prevSlide] = imageUrlLarge;

package/source/components/VehicleDetailedSlider/partials/PriceData.tsx

@@ -19,7 +19,6 @@ const MIN_PRICE_DIFFERENCE = 500;
 const EUR = `\u20AC`;
 
 const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, financingConfig, activeTab }) => {
-  console.log('financingConfig', financingConfig);
   const percentageOfFirstInstallment = activeTab === 0 ? financingConfig!.financing.percentageOfFirstInstallment : financingConfig!.leasing.percentageOfFirstInstallment;
   return (
     <div className={styles.topWrapper}>
@@ -30,7 +29,7 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPr
           {` ${EUR} ${t('slider.save')}`}
         </Badge>
       )}
-      {(!isNil(percentageOfFirstInstallment) && activeTab !== 2) && 
+      {(!isNil(percentageOfFirstInstallment) && activeTab !== 2) &&
         <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`${percentageOfFirstInstallment}${percentageOfFirstInstallment > 0 ? '%' : EUR} ${t('slider.firstInstallment')}`}</Badge>}
       {historyPriceDifferencePerCent >= MIN_PERCENT && (
         <Badge type='red' className={styles.priceDifferencePerCent}>