@bytebrand/fe-ui-core 4.8.51 → 4.8.53

package/package.json

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

package/source/components/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -128,7 +128,7 @@ class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
           {description ? (
             <span className={styles.labelContent}>
               {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
             </span>
           ) : false}
         </label>

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.tsx

@@ -16,7 +16,6 @@ const OfferCheckboxGroup: FC<IOfferPeriod> = ({ additionalService, transferInsta
   return (
     <div className={offerGroupClass}>
       {isAboAccordionExpanded0 && <CheckboxContainer {...additionalService } />}
-      {priceTabIndex === 2 && <CheckboxContainer {...{ ...transferInstallments, isAboAccordionExpanded0 }} />}
     </div>
   );
 };

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -44,8 +44,6 @@ interface IProps {
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
   showDownPayment: boolean;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
   handleSentryInit?: () => void;
 }
 
@@ -310,8 +308,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       make,
       model,
       showDownPayment,
-      financingFirstInstallment,
-      leasingFirstInstallment,
       subModel,
       powerKW,
       powerPS,
@@ -341,8 +337,6 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       financingConfig,
       showNewLabel,
       showDownPayment,
-      financingFirstInstallment,
-      leasingFirstInstallment,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
       historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
       activeTab

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

@@ -3,28 +3,24 @@ import FormattedNumber from '../../FormattedNumber/FormattedNumber';
 import Badge from '../../_common/Badge/Badge';
 
 import styles from './PriceData.styl';
+import { isNil } from 'lodash';
 
 interface IProps {
   t: (phrase: string, config?: any) => string;
   showNewLabel: boolean;
   historyPriceDifference: number;
   historyPriceDifferencePerCent: number;
-  financingConfig?: any;
-  activeTab?: number;
-  showDownPayment: boolean;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
+  financingConfig?:any;
+  activeTab?:number;
+  showDownPayment:boolean;
 }
 
 const MIN_PERCENT = 5;
 const MIN_PRICE_DIFFERENCE = 500;
-const EUR = `€`;
+const EUR = `\u20AC`;
 
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
-  const showDownPaymentBadge = showDownPayment && (
-    (activeTab === 0 && financingFirstInstallment === 0) ||
-    (activeTab === 1 && leasingFirstInstallment === 0)
-  );
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, financingConfig, activeTab }) => {
+  const percentageOfFirstInstallment = activeTab === 0 ? financingConfig!.financing.percentageOfFirstInstallment : financingConfig!.leasing.percentageOfFirstInstallment;
   return (
     <div className={styles.topWrapper}>
       {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
@@ -34,8 +30,8 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNe
           {` ${EUR} ${t('slider.save')}`}
         </Badge>
       )}
-      {showDownPaymentBadge &&
-        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
+      {(!isNil(percentageOfFirstInstallment) && activeTab !== 2 && showDownPayment) &&
+        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`${percentageOfFirstInstallment}${percentageOfFirstInstallment > 0 ? '%' : EUR} ${t('slider.firstInstallment')}`}</Badge>}
       {historyPriceDifferencePerCent >= MIN_PERCENT && (
         <Badge type='red' className={styles.priceDifferencePerCent}>
           -{historyPriceDifferencePerCent}%

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -13,6 +13,7 @@ interface IMaterialTooltip {
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
   disabled?: Boolean;
   zindex?: number;
+  disablePortal?: boolean;
 }
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
@@ -32,7 +33,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }));
 
-const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, placement, className, disabled, zindex, disablePortal = true }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onHandleMenuOpen = (event: any) => {
@@ -71,7 +72,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
             className={className}
             zindex={zindex}
             PopperProps={{
-              disablePortal: true
+              disablePortal
             }}
           >
             <IconButton>

package/source/components/_common/withStats/withStats.tsx

@@ -161,7 +161,7 @@ const withStats = (WrappedComponent: any) => ({
           </Badge>
         )}
         {showDownPayment && (
-          <Badge type='blue' className={styles.badgeItem}>
+          <Badge type='lightBlue' className={styles.badgeItem}>
             <span className={styles.badgeFull}>{downPaymentText}</span>
             <span className={styles.badgeShort}>{downPaymentShortText}</span>
           </Badge>