@bytebrand/fe-ui-core 4.2.166 → 4.2.167

package/package.json

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

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -27,11 +27,13 @@ interface IProps {
   statsData: any;
   isFavorite: boolean;
   showNewLabel: boolean;
+  activeTab:number;
   make: string;
   model: string;
   subModel: string;
   powerKW: number;
   powerPS: number;
+  financingConfig:any;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
@@ -238,6 +240,8 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       subModel,
       powerKW,
       powerPS,
+      activeTab,
+      financingConfig,
       onCarFavorite
     } = this.props;
     const { activeSlide } = this.state;
@@ -259,9 +263,11 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
 
     const priceProps = {
       t,
+      financingConfig,
       showNewLabel,
       historyPriceDifference: price ? price.historyPriceDifference : 0,
-      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0
+      historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
+      activeTab
     };
 
     const statsProps = {

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

@@ -45,3 +45,7 @@
 .new
   @extend .priceDifference
   margin-right: 12px
+  
+.percentageOfFirstInstallment
+  @extend .priceDifference
+  margin-left: 12px

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

@@ -3,19 +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;
 }
 
 const MIN_PERCENT = 5;
 const MIN_PRICE_DIFFERENCE = 500;
 const EUR = `\u20AC`;
 
-const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent }) => {
+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}>
       {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
@@ -25,6 +30,8 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showNewLabel, historyPr
           {` ${EUR} ${t('slider.save')}`}
         </Badge>
       )}
+      {(!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}>
           -{historyPriceDifferencePerCent}%

package/source/components/_common/Badge/Badge.styl

@@ -35,6 +35,9 @@ $badge-border-width = 1px
 .blue
   background-color: $primary
   color: white
+.lightBlue
+  background-color: #26C6F9
+  color: white 
 
 .red
   color: #fff;

package/source/components/_common/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import styles from './Badge.styl';
 
-export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red';
+export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red' | 'lightBlue';
 
 export interface IBadgeProps {
   children: any;