@bytebrand/fe-ui-core 4.2.168 → 4.2.170

package/package.json

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

package/source/components/UserDashboardPage/sections/OrderStatusSection/AdditionalOrderInfo.styl

@@ -28,6 +28,10 @@
     top: 0;
     left: -16px;
 
+  .overallRate
+    border-top: 1px solid rgba(76,78,100,0.12)
+    padding-top: 15px
+
 .labelText
   color: $black50
   font-size: 14px

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

@@ -136,7 +136,9 @@ const OrderStatusSection = ({
               registrationCost,
               transportationCost,
               customerAddress,
-              deliveryAddress
+              deliveryAddress,
+              firstRate,
+              paymentProtectionInsuranceCost
             } = orderedCar;
   
             const additionalOrderData = {
@@ -150,6 +152,8 @@ const OrderStatusSection = ({
                 ...registrationCost ? [getDataPriceItem(registrationCost, t('MyOrderPage:vehicleRegistration'))] : [],
                 ...licensePlateCost ? [getDataPriceItem(licensePlateCost, t('MyOrderPage:licensePlates'))] : [],
                 ...transportationCost ? [getDataPriceItem(transportationCost, t('MyOrderPage:delivery'))] : [],
+                ...paymentProtectionInsuranceCost ? [getDataPriceItem(paymentProtectionInsuranceCost, t('MyOrderPage:paymentProtectionInsuranceCost'))]: [],
+                ...firstRate ? [getDataPriceItem(firstRate, t('MyOrderPage:firstRate'))] : [],
                 ...buyingType !== 'buy' ? [
                   ...monthlyInstallment ? [
                     {

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}>

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.styl

@@ -52,4 +52,14 @@
   font-weight: 700
   font-size: 14px
   border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+.vehicleId
+  padding: 11px
+  background-color: #fff
+
+.vehicleIdLabel
+  font-size: 14px
+  font-weight: 700
+  line-height: 16px
+  margin-bottom: 12px

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -13,6 +13,8 @@ import { resolveMmsValue } from '../../../../framework/utils/FiltersUtils';
 import FilterBlock from '../../../SearchFilters/common/FilterBlock/FilterBlock';
 import styles from './FiltersContainer.styl';
 import AlternativeID from '../../../SearchFilters/filters/AlternativeID';
+import MaterialField from '../../../_common/MaterialField/MaterialField';
+import { toJS } from 'mobx';
 
 type PathParamsType = {
   location?: any;
@@ -387,10 +389,22 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     });
   };
 
+  onVehicleIdChange = (value: string) => {
+    const { filters, changeFilterValue, search } = this.props;
+    const upperCaseValue = value.toLocaleUpperCase();
+    if (value.length === 6 || !value) {
+      this.onFilterChange('VEHICLE_ID', upperCaseValue);
+      changeFilterValue('VEHICLE_ID', upperCaseValue);
+      search(toJS(filters), 1, true);
+    }
+  };
+
   render() {
-    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition } = this.props;
+    const { t, onAlternativeRedirect, isAlternative, isErrorAlternativeField, Link, locationSearch, successTransition, filters } = this.props;
     const paramsFromQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
 
+    const { VEHICLE_ID } = toJS(filters);
+
     const alternativeIDProps = {
       t,
       successTransition,
@@ -415,6 +429,15 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
         <div className={styles.title}>
           <h3 className={styles.titleText}>{this.props.t('SearchPage:filterBy')}</h3>
         </div>
+        <div className={styles.vehicleId}>
+          <div className={styles.vehicleIdLabel}>auto.de-ID</div>
+          <MaterialField
+            value={VEHICLE_ID.value}
+            onChange={this.onVehicleIdChange}
+            size='custom'
+            label='z.B: FCEE67'
+          />
+        </div>
         {this.renderFilters()}
         <Link className={styles.linkToDetailed} to={`/${isAlternative ? 'alternative' : 'search'}/detailed${locationSearch}`}>{t('SearchPage:detailedSearch')}</Link>
       </div>