@bytebrand/fe-ui-core 4.2.137 → 4.2.139

package/package.json

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

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

@@ -37,8 +37,8 @@ const RequestedCarsSection = ({ t, getSupportedImageFormat, requestedCars, redir
     if (requestedCars && requestedCars.length > 0) {
       const carsCard = requestedCars.map((car) => {
         if (car && car.car) {
-          const { car: { mainData: { make = '', model = '', subModel = '' } = {} } } = car;
-          const { car: { _id, metaData: { mainImageId = '' } = {} } } = car;
+          const { car: { mainData: { make, model, subModel } } } = car;
+          const { car: { _id, metaData: { mainImageId } } } = car;
           const { buyingType, paybackPeriod, monthlyInstallment, request, currentSalesPrice } = car;
           const imageUrl = getSupportedImageFormat(_id, mainImageId, 'small');
           return (

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

@@ -23,7 +23,7 @@ export interface IVehiclePriceProps {
   size?: 'small' | 'semimedium' | 'medium' | 'large';
   disableStyles?: boolean;
   disablePrice?: boolean;
-  isDynamicFontSize?:boolean;
+  dynamicFontSize?: string;
 
   // FormattedNumber props
   toRound?: boolean;
@@ -38,12 +38,21 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   const textRef = useRef(null);
 
   const updateFontSize = useCallback(() => {
-    if (price && isDynamicFontSize && textRef.current) {
+    if (price && dynamicFontSize && textRef.current) {
+      const textWidth = textRef.current.getBoundingClientRect().width;
       const priceLength = Math.round(price).toString().length;
-      const newSize = Math.min(60, 200 / priceLength);
-      textRef.current.style.fontSize = `${newSize}px`;
+      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.isDynamicFontSize]);
+  }, [props.price, props.dynamicFontSize]);
 
   useEffect(() => {
     updateFontSize();
@@ -52,10 +61,10 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   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 {
@@ -93,7 +102,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
   // FormattedNumber props
   const {
     unit, sub, numbersAfterDot, toRound, numberContainerClassName,
-    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, isDynamicFontSize
+    afterCommaClassName, beforeCommaClassName, disableFormatting, disablePrice, dynamicFontSize
   } = props;
 
   const decimalsClass = classnames(afterCommaClassName, styles.decimals);
@@ -109,7 +118,7 @@ const VehicleFormattedPrice: React.FunctionComponent<IVehiclePriceProps> = (prop
     disableFormatting,
     numbersAfterDot,
     toRound,
-    isDynamicFontSize,
+    dynamicFontSize,
     beforeCommaClassName,
     value: price,
     className: numberContainerClassName,
@@ -141,7 +150,7 @@ VehicleFormattedPrice.defaultProps = {
   unitClassName: '',
   postfixClassName: '',
   subClassName: '',
-  isDynamicFontSize: false,
+  dynamicFontSize: '',
   sub: '',
   // FormattedNumber props
   toRound: false,

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

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

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

@@ -46,7 +46,7 @@ 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 priceFontSize: string = monthlyInstallment ? (getFormattedPrice(monthlyInstallment)?.toString().match(/\d/g).length >= 4 ? 'small' : 'large') : '';
 
   const tabContentPaddingClassName = classnames(
     styles.tabContentPadding,
@@ -94,7 +94,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
                 postfix={postfix}
                 numbersAfterDot={0}
                 size='large'
-                isDynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy')? false : true}
+                dynamicFontSize={tabContentPaddingClassName.includes('tabContentPaddingForBuy') ? 'large' : 'small'}
               />
             </div>
           ) : null}
@@ -114,7 +114,7 @@ const PriceContent: React.FunctionComponent<IPriceContentProps> = ({
           </span>
         </div>
       </div>
-      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} /> }
+      {offerBlockOpen && <OfferBlockComponent {...{ ...offerBlockProps, priceTabIndex: activeTab }} />}
       <RequestOffer {...requestOfferProps} />
     </>
   );

package/source/framework/constants/common.ts

@@ -27,7 +27,8 @@ export const COOKIE_SCHEMA_LINKS = {
   Facebook: 'https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0',
   ['Google Analytics']: 'http://datenschutzbestimmungen/',
   Hotjar: 'https://www.hotjar.com/legal/policies/privacy/de/',
-  Microsoft: 'https://privacy.microsoft.com/de-de/privacystatement'
+  Microsoft: 'https://privacy.microsoft.com/de-de/privacystatement',
+  Matomo: 'https://matomo.org/privacy-policy/',
 }
 
 export const COOKIE_SCHEMA = {
@@ -82,7 +83,8 @@ export const COOKIE_SCHEMA = {
       '_uetvid',
       ...GOOGLE_BUNDLE_COOKIES
     ],
-    Hotjar: ['hotjar']
+    Hotjar: ['hotjar'],
+    Matomo: ['MATOMO_SESSID','_pk_ses.1.4d04', '_pk_id.1.4d04']
 
   },
   marketing: {