@bytebrand/fe-ui-core 4.8.46 → 4.8.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bytebrand-fe-ui-core-4.8.47.tgz +0 -0
- package/media/locales/de/promoSlider.json +0 -1
- package/media/locales/en/promoSlider.json +0 -1
- package/package.json +5 -3
- package/source/components/AccordionWidget/AccordionWidget.styl +0 -1
- package/source/components/AccordionWidget/AccordionWidget.tsx +4 -8
- package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx +11 -23
- package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx +6 -1
- package/source/components/VehicleDetailedSlider/partials/PriceData.tsx +9 -8
- package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl +0 -5
- package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx +1 -3
- package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl +1 -1
- package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx +11 -24
- package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl +2 -3
- package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl +1 -4
- package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx +2 -3
- package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx +1 -1
- package/source/components/VehicleSmallCard/VehicleSmallCard.tsx +6 -15
- package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx +1 -4
- package/source/components/_common/withStats/withStats.styl +21 -0
- package/source/components/_common/withStats/withStats.tsx +21 -4
- package/source/framework/DataTransformers.ts +0 -1
- package/source/framework/constants/common.ts +4 -8
- package/source/framework/types/types.ts +0 -1
- package/source/framework/vehiclesProps/decoratedLightProps.tsx +12 -48
- package/source/framework/vehiclesProps/decoratedProps.tsx +8 -35
- package/source/locales/data.ts +5 -4
- package/.husky/pre-push +0 -4
- package/.storybook/addons.js +0 -4
- package/.storybook/config.js +0 -64
- package/.storybook/postcss.config.js +0 -6
- package/.storybook/preview-head.html +0 -10
- package/.storybook/webpack.config.js +0 -130
- package/__tests__/components/Checkout/OrderOverviewItem/OrderOverviewItem.test.tsx +0 -42
- package/__tests__/components/Checkout/PaymentTypeCard/PaymentTypeCard.test.tsx +0 -50
- package/__tests__/components/Checkout/RadioGroup.test.tsx +0 -95
- package/__tests__/components/Checkout/ServiceCardWrapper.test.tsx +0 -53
- package/__tests__/components/Checkout/Switcher.test.tsx +0 -43
- package/__tests__/components/UserDasboardPage/sections/CheckoutSection/CheckoutSection.test.tsx +0 -613
- package/__tests__/components/UserDasboardPage/sections/FavoriteSection/FavoriteSection.test.tsx +0 -335
- package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/AdditionalOrderInfo.test.tsx +0 -127
- package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCar.test.tsx +0 -58
- package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCard.test.tsx +0 -74
- package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusSection.test.tsx +0 -62
- package/__tests__/components/UserDasboardPage/sections/RequestedCarsSection/RequestedCarsSection.test.tsx +0 -117
- package/__tests__/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.test.tsx +0 -58
- package/__tests__/components/VehicleSmallCard/VehicleInfo.test.tsx +0 -88
- package/__tests__/components/VehicleSmallCard/VehicleTitle.test.tsx +0 -91
- package/__tests__/components/_common/Badge/Badge.test.tsx +0 -15
- package/__tests__/components/_common/IconSVG/IconSVG.test.tsx +0 -23
- package/__tests__/components/_common/Image/Image.test.tsx +0 -82
- package/__tests__/components/_common/MaterialAutocomplete/MaterialAutocomplete.test.tsx +0 -49
- package/__tests__/components/_common/MaterialDatePicker/MaterialDatePicker.test.tsx +0 -54
- package/__tests__/components/_common/MaterialField/MaterialField.test.tsx +0 -58
- package/__tests__/components/_common/StarButton/StarButton.test.tsx +0 -46
- package/__tests__/mockedData/financingConfig.js +0 -202
- package/__tests__/mockedData/mockedPendingRequestedCar.js +0 -69
- package/__tests__/utils/CommonUtils/addPrefixToKeys.test.ts +0 -18
- package/__tests__/utils/CommonUtils/arrToObj.test.js +0 -32
- package/__tests__/utils/CommonUtils/checkRangeValuesOnEqual.test.ts +0 -17
- package/__tests__/utils/CommonUtils/fixNumber.test.ts +0 -20
- package/__tests__/utils/CommonUtils/formatMileage.test.ts +0 -8
- package/__tests__/utils/CommonUtils/getChipFilterValue.test.ts +0 -22
- package/__tests__/utils/CommonUtils/getFormattedNumber.test.ts +0 -19
- package/__tests__/utils/CommonUtils/getFormattedPrice.test.ts +0 -19
- package/__tests__/utils/CommonUtils/getGroupValuesForQuery.test.ts +0 -51
- package/__tests__/utils/CommonUtils/getOfferSliders.test.ts +0 -64
- package/__tests__/utils/CommonUtils/getPriceRating.test.ts +0 -26
- package/__tests__/utils/CommonUtils/getPriceRatingConfig.test.ts +0 -33
- package/__tests__/utils/CommonUtils/preloadNearbyImages.test.ts +0 -9
- package/__tests__/utils/CommonUtils/sliceLessThan.test.ts +0 -23
- package/__tests__/utils/CommonUtils/sliceMoreThan.test.ts +0 -23
- package/source/components/AdvantageItem/AdvantageItem.story.js +0 -23
- package/source/components/Alternative/Dealer.story.js +0 -32
- package/source/components/Alternative/Dealer.story.styl +0 -3
- package/source/components/Breadcrumbs/Breadcrumbs.story.js +0 -40
- package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.story.js +0 -45
- package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.js +0 -243
- package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.styl +0 -21
- package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.js +0 -105
- package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.styl +0 -37
- package/source/components/Checkout/Switcher/Switcher.story.js +0 -41
- package/source/components/Checkout/Switcher/Switcher.story.styl +0 -2
- package/source/components/CompactSearchWidget/CompactSearchWidget.story.js +0 -187
- package/source/components/ContactForm/ContactForm.story.js +0 -94
- package/source/components/ContactForm/ContactForm.story.styl +0 -0
- package/source/components/ContactInfo/ContactInfo.story.js +0 -58
- package/source/components/CustomerQuote/CustomerQuote.story.js +0 -41
- package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.js +0 -73
- package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.styl +0 -5
- package/source/components/FormattedNumber/FormattedNumber.story.js +0 -114
- package/source/components/InfoBlocks/InfoBlockWrapper.story.js +0 -101
- package/source/components/InfoBlocks/InfoBlockWrapper.story.styl +0 -46
- package/source/components/OfferPanel/AboAccordion/AboFaq/AboFaq.story.js +0 -97
- package/source/components/OfferPanel/OfferPanel.story.js +0 -139
- package/source/components/OfferPanel/RangeGroup/RangeGroup.story.js +0 -35
- package/source/components/OfferPanel/RangeGroup/RangeGroup.story.styl +0 -3
- package/source/components/PriceRating/PriceRating.story.js +0 -39
- package/source/components/PriceRating/PriceRating.story.styl +0 -2
- package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.js +0 -78
- package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.styl +0 -11
- package/source/components/RateSearchValue/RateSearchValue.story.js +0 -78
- package/source/components/RateSearchValue/RateSearchValue.story.styl +0 -2
- package/source/components/RateSearchWidget/RateSearchWidget.story.js +0 -57
- package/source/components/RateSearchWidget/RateSearchWidget.story.styl +0 -12
- package/source/components/SearchFilters/FiltersFactory.story.js +0 -273
- package/source/components/SearchPage/Filters/MakeModel/MakeModel.story.js +0 -12
- package/source/components/SearchWidget/BasicDataWidget/BasicDataWidget.story.js +0 -834
- package/source/components/SearchWidget/BasicDataWidget/BasicDataWidget.story.styl +0 -40
- package/source/components/SearchWidget/SearchWidget.story.js +0 -191
- package/source/components/SearchWidget/SearchWidget.story.styl +0 -6
- package/source/components/Stepper/Stepper.story.js +0 -119
- package/source/components/Stepper/Stepper.story.styl +0 -41
- package/source/components/Theme.story.js +0 -36
- package/source/components/Theme.story.styl +0 -85
- package/source/components/TickerText/TickerText.story.js +0 -17
- package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.story.js +0 -95
- package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.story.js +0 -97
- package/source/components/Vehicle/VehicleConsumption/VehicleConsumption.story.js +0 -31
- package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.story.js +0 -247
- package/source/components/VehicleCompared/CompareGeneral/CompareGeneral.story.js +0 -30
- package/source/components/VehicleCompared/ComparePrice/ComparePrice.story.js +0 -18
- package/source/components/VehicleCompared/CompareTitle/CompareTitle.story.js +0 -19
- package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.story.js +0 -44
- package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.story.js +0 -120
- package/source/components/VehiclePromoSlider/VehiclePromoInfo/VehiclePromoInfo.story.js +0 -42
- package/source/components/VehiclePromoSlider/VehiclePromoSlide/VehiclePromoSlide.story.js +0 -62
- package/source/components/VehiclePromoSlider/VehiclePromoSlider.story.js +0 -42
- package/source/components/VehicleSmallCard/VehicleSmallCard.story.js +0 -412
- package/source/components/VehicleSmallCard/VehicleSmallCard.story.styl +0 -56
- package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.js +0 -199
- package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.styl +0 -40
- package/source/components/_common/Accordion/Accordion.story.js +0 -36
- package/source/components/_common/Badge/Badge.story.js +0 -27
- package/source/components/_common/Badge/Badge.story.styl +0 -5
- package/source/components/_common/Bubble/Bubble.story.js +0 -52
- package/source/components/_common/Button/Button.story.js +0 -52
- package/source/components/_common/Button/Button.story.styl +0 -5
- package/source/components/_common/ButtonOld/Button.story.js +0 -54
- package/source/components/_common/ButtonOld/Button.story.styl +0 -5
- package/source/components/_common/Checkbox/Checkbox.story.js +0 -85
- package/source/components/_common/Checkbox/Checkbox.story.styl +0 -14
- package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.js +0 -126
- package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.styl +0 -14
- package/source/components/_common/Chip/Chip.story.js +0 -43
- package/source/components/_common/ChipList/ChipList.story.js +0 -36
- package/source/components/_common/DropDown/DropDown.story.js +0 -35
- package/source/components/_common/ExpandablePanel/ExpandablePanel.story.js +0 -41
- package/source/components/_common/Histogram/Histogram.story.js +0 -51
- package/source/components/_common/IconSVG/IconSVG.story.js +0 -21
- package/source/components/_common/IconSVG/IconSVG.story.styl +0 -25
- package/source/components/_common/Image/Image.story.js +0 -142
- package/source/components/_common/Image/Image.story.styl +0 -18
- package/source/components/_common/ImagesSet/ImagesSet.story.js +0 -34
- package/source/components/_common/ImagesSet/ImagesSet.story.styl +0 -4
- package/source/components/_common/Loader/Loader.story.js +0 -21
- package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.story.js +0 -49
- package/source/components/_common/MaterialDatePicker/MaterialDatePicker.story.js +0 -45
- package/source/components/_common/MaterialDatePicker/MaterialDatePicker.story.styl +0 -6
- package/source/components/_common/MaterialField/MaterialField.story.js +0 -87
- package/source/components/_common/MaterialField/MaterialField.story.styl +0 -34
- package/source/components/_common/MaterialSelect/MaterialSelect.story.js +0 -52
- package/source/components/_common/MaterialSelect/MaterialSelect.story.styl +0 -6
- package/source/components/_common/MaterialStepButton/MaterialStepButton.story.js +0 -47
- package/source/components/_common/MaterialStepButton/MaterialStepButton.story.styl +0 -6
- package/source/components/_common/MaterialSwitch/MaterialSwitch.story.js +0 -17
- package/source/components/_common/MaterialTooltip/MaterialTooltip.story.js +0 -10
- package/source/components/_common/Modal/Modal.story.js +0 -37
- package/source/components/_common/MuiGroupedSelect/MuiGroupedSelect.story.js +0 -21
- package/source/components/_common/PropertySelector/PSGroup.story.js +0 -93
- package/source/components/_common/PropertySelector/PSGroup.story.styl +0 -25
- package/source/components/_common/PropertySelector/ProperySelector.story.js +0 -83
- package/source/components/_common/Radio/FormRadioGroup.story.js +0 -28
- package/source/components/_common/Radio/FormRadioGroup.story.styl +0 -2
- package/source/components/_common/Radio/Radio.story.js +0 -54
- package/source/components/_common/Radio/RadioGroup.story.js +0 -90
- package/source/components/_common/Radio/RadioGroup.story.styl +0 -39
- package/source/components/_common/Range/Range.story.js +0 -46
- package/source/components/_common/Range/Range.story.styl +0 -5
- package/source/components/_common/SliderArrow/SliderArrow.story.js +0 -18
- package/source/components/_common/Tabs/Tabs.story.js +0 -56
- package/source/components/_common/TimePicker/TimePicker.story.js +0 -37
- package/source/components/_common/Tooltip/Tooltip.story.js +0 -28
- package/source/components/_common/UserMenu/MaterialMenu.story.js +0 -73
- package/source/components/_common/VehicleSlider/VehicleSlider.story.js +0 -99
- package/source/components/_common/VehicleSlider/VehicleSlider.story.styl +0 -0
- package/source/components/_common/withLabel/withLabel.story.js +0 -62
- package/source/components/_common/withPopover/withPopover.story.js +0 -48
- package/source/components/_common/withPopover/withPopover.story.styl +0 -54
- package/source/components/_common/withStats/withStats.story.js +0 -75
|
Binary file
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
|
|
3
3
|
"co2": "{{co2}}g CO2/km (komb)*",
|
|
4
|
-
"co2Class": "CO2-Klasse {{class}} (komb)",
|
|
5
4
|
"weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
|
|
6
5
|
"weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
|
|
7
6
|
"withoutDeposit": "ohne Anzahlung",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
|
|
3
3
|
"co2": "{{co2}}g CO2/km (comb)*",
|
|
4
|
-
"co2Class": "CO2-class {{class}} (comb)",
|
|
5
4
|
"weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
|
|
6
5
|
"weDeliverToYou": "We deliver your car to you!",
|
|
7
6
|
"withoutDeposit": "Without Deposit",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bytebrand/fe-ui-core",
|
|
3
|
-
"version": "4.8.
|
|
3
|
+
"version": "4.8.48",
|
|
4
4
|
"description": "UI components for the auto.de project",
|
|
5
5
|
"main": "index.ts",
|
|
6
6
|
"module": "dist/common.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"@babel/preset-typescript": "^7.21.0",
|
|
15
15
|
"@bytebrand/car-schema-selectors": "^2.0.7",
|
|
16
16
|
"@bytebrand/fe-histoslider": "3.0.0",
|
|
17
|
-
"@bytebrand/i18n-dictionaries": "^
|
|
17
|
+
"@bytebrand/i18n-dictionaries": "^1.5.2",
|
|
18
18
|
"@emotion/react": "^11.9.3",
|
|
19
19
|
"@emotion/styled": "^11.9.3",
|
|
20
20
|
"@mui/material": "^5.9.0",
|
|
@@ -104,7 +104,9 @@
|
|
|
104
104
|
"@types/react": "^16.8.3"
|
|
105
105
|
},
|
|
106
106
|
"scripts": {
|
|
107
|
-
"
|
|
107
|
+
"build": "true",
|
|
108
|
+
"prepublishOnly": "npm run build",
|
|
109
|
+
"prepare": "npm run build",
|
|
108
110
|
"storybook": "start-storybook -p 6006",
|
|
109
111
|
"clean": "rm -rf ./dist/*.*",
|
|
110
112
|
"build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
|
|
@@ -36,7 +36,7 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
|
|
|
36
36
|
key={i}
|
|
37
37
|
description={prop.description}
|
|
38
38
|
classNameIcon={styles.propertyIcon}
|
|
39
|
-
icon={prop.icon
|
|
39
|
+
icon={prop.icon || 'no-image'}
|
|
40
40
|
className={styles.accordionVehicleProp}
|
|
41
41
|
/>
|
|
42
42
|
);
|
|
@@ -101,13 +101,9 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
|
|
|
101
101
|
const autoDeId = car.metaData && car.metaData.vehicleId;
|
|
102
102
|
const { consumption } = car;
|
|
103
103
|
const mainPropertiesList = getOverviewDetails(consumption.fuel);
|
|
104
|
-
const mainProperties = mainPropertiesList.map((prop: string) =>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
|
|
108
|
-
description: this.props.decoratedProps[prop].value
|
|
109
|
-
};
|
|
110
|
-
});
|
|
104
|
+
const mainProperties = mainPropertiesList.map((prop: string) => (
|
|
105
|
+
{ icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
|
|
106
|
+
);
|
|
111
107
|
return (
|
|
112
108
|
<div>
|
|
113
109
|
{this.renderPropsBlock(mainProperties)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect,
|
|
1
|
+
import React, { useState, useEffect, FunctionComponent } from 'react';
|
|
2
2
|
import _get from 'lodash/get';
|
|
3
3
|
import { Hidden } from 'react-grid-system';
|
|
4
4
|
import PriceContent from './partials/PriceContent';
|
|
@@ -104,31 +104,19 @@ const VehicleDetailedSidebar: FunctionComponent<IVehicleDetailedSidebarProps> =
|
|
|
104
104
|
}
|
|
105
105
|
];
|
|
106
106
|
|
|
107
|
-
const initialDefaultAppliedForPath = useRef<string | null>(null);
|
|
108
|
-
|
|
109
107
|
useEffect(() => {
|
|
110
108
|
const getlocalStorageActiveTabCDP = localStorage.getItem('activeTabCDP');
|
|
111
|
-
if (getlocalStorageActiveTabCDP)
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
localStorage.removeItem('activeTabCDP');
|
|
121
|
-
initialDefaultAppliedForPath.current = pathname;
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
if (
|
|
125
|
-
initialDefaultAppliedForPath.current !== pathname
|
|
126
|
-
&& _get(price, 'leasing.isActive', false)
|
|
127
|
-
) {
|
|
128
|
-
setActiveTab(null, 1);
|
|
129
|
-
initialDefaultAppliedForPath.current = pathname;
|
|
109
|
+
if (!getlocalStorageActiveTabCDP) return;
|
|
110
|
+
const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
|
|
111
|
+
return title === getlocalStorageActiveTabCDP;
|
|
112
|
+
});
|
|
113
|
+
if (activeTab === -1) {
|
|
114
|
+
setActiveTab(null, 0);
|
|
115
|
+
} else {
|
|
116
|
+
setActiveTab(null, activeTab);
|
|
130
117
|
}
|
|
131
|
-
|
|
118
|
+
localStorage.removeItem('activeTabCDP');
|
|
119
|
+
}, [pathname, activeTab]); // tslint:disable-line:align
|
|
132
120
|
|
|
133
121
|
const priceProps = {
|
|
134
122
|
tabsTitles,
|
|
@@ -44,6 +44,8 @@ interface IProps {
|
|
|
44
44
|
hideModal: (id: string) => void;
|
|
45
45
|
onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
|
|
46
46
|
showDownPayment: boolean;
|
|
47
|
+
financingFirstInstallment?: number | null;
|
|
48
|
+
leasingFirstInstallment?: number | null;
|
|
47
49
|
handleSentryInit?: () => void;
|
|
48
50
|
}
|
|
49
51
|
|
|
@@ -308,6 +310,8 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
|
|
|
308
310
|
make,
|
|
309
311
|
model,
|
|
310
312
|
showDownPayment,
|
|
313
|
+
financingFirstInstallment,
|
|
314
|
+
leasingFirstInstallment,
|
|
311
315
|
subModel,
|
|
312
316
|
powerKW,
|
|
313
317
|
powerPS,
|
|
@@ -334,9 +338,10 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
|
|
|
334
338
|
|
|
335
339
|
const priceProps = {
|
|
336
340
|
t,
|
|
337
|
-
financingConfig,
|
|
338
341
|
showNewLabel,
|
|
339
342
|
showDownPayment,
|
|
343
|
+
financingFirstInstallment,
|
|
344
|
+
leasingFirstInstallment,
|
|
340
345
|
historyPriceDifference: price ? price.historyPriceDifference : 0,
|
|
341
346
|
historyPriceDifferencePerCent: price ? price.historyPriceDifferencePerCent : 0,
|
|
342
347
|
activeTab
|
|
@@ -3,24 +3,25 @@ import FormattedNumber from '../../FormattedNumber/FormattedNumber';
|
|
|
3
3
|
import Badge from '../../_common/Badge/Badge';
|
|
4
4
|
|
|
5
5
|
import styles from './PriceData.styl';
|
|
6
|
-
import { isNil } from 'lodash';
|
|
7
6
|
|
|
8
7
|
interface IProps {
|
|
9
8
|
t: (phrase: string, config?: any) => string;
|
|
10
9
|
showNewLabel: boolean;
|
|
11
10
|
historyPriceDifference: number;
|
|
12
11
|
historyPriceDifferencePerCent: number;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
activeTab?: number;
|
|
13
|
+
showDownPayment: boolean;
|
|
14
|
+
financingFirstInstallment?: number | null;
|
|
15
|
+
leasingFirstInstallment?: number | null;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
const MIN_PERCENT = 5;
|
|
19
19
|
const MIN_PRICE_DIFFERENCE = 500;
|
|
20
20
|
const EUR = `\u20AC`;
|
|
21
21
|
|
|
22
|
-
const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNewLabel, historyPriceDifference, historyPriceDifferencePerCent,
|
|
23
|
-
const
|
|
22
|
+
const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
|
|
23
|
+
const relevantFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
|
|
24
|
+
const showZeroDownPayment = showDownPayment && relevantFirstInstallment === 0;
|
|
24
25
|
return (
|
|
25
26
|
<div className={styles.topWrapper}>
|
|
26
27
|
{showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
|
|
@@ -30,8 +31,8 @@ const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment,showNew
|
|
|
30
31
|
{` ${EUR} ${t('slider.save')}`}
|
|
31
32
|
</Badge>
|
|
32
33
|
)}
|
|
33
|
-
{
|
|
34
|
-
<Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{
|
|
34
|
+
{showZeroDownPayment &&
|
|
35
|
+
<Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
|
|
35
36
|
{historyPriceDifferencePerCent >= MIN_PERCENT && (
|
|
36
37
|
<Badge type='red' className={styles.priceDifferencePerCent}>
|
|
37
38
|
-{historyPriceDifferencePerCent}%
|
package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx
CHANGED
|
@@ -88,9 +88,7 @@ class VehiclePriceItem extends React.Component<IVehiclePriceItemProps> {
|
|
|
88
88
|
const priceItemCategoryClassName = classnames(
|
|
89
89
|
styles.priceItemCategory,
|
|
90
90
|
{ [styles.priceItemCategorySearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
|
|
91
|
-
{ [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' }
|
|
92
|
-
{ [styles.priceItemCategoryLanding]: vehicleComponentName === 'landing' },
|
|
93
|
-
{ [styles.priceItemCategoryMain]: vehicleComponentName === 'main' }
|
|
91
|
+
{ [styles.priceItemCategoryComparable]: vehicleComponentName === 'comparable' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' }
|
|
94
92
|
);
|
|
95
93
|
|
|
96
94
|
return (
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/* tslint:disable */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
-
import _get from 'lodash/get';
|
|
5
4
|
import styles from './VehicleInfo.styl';
|
|
6
5
|
import PriceRating from '../../../PriceRating/PriceRating';
|
|
7
6
|
import { Visible, Hidden } from 'react-grid-system';
|
|
@@ -44,8 +43,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
|
|
|
44
43
|
consumption,
|
|
45
44
|
location,
|
|
46
45
|
offer,
|
|
47
|
-
engineData
|
|
48
|
-
leasing
|
|
46
|
+
engineData
|
|
49
47
|
} = props;
|
|
50
48
|
const firstRegistrationDate = regDate && regDate !== 0 ? regDate : 'N/A';
|
|
51
49
|
|
|
@@ -67,8 +65,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
|
|
|
67
65
|
},
|
|
68
66
|
environmentEmissions: {
|
|
69
67
|
co2: environmentEmissions.co2,
|
|
70
|
-
wltpCo2: environmentEmissions.wltpCo2
|
|
71
|
-
wltpEnergyEfficiencyClass: environmentEmissions.wltpEnergyEfficiencyClass
|
|
68
|
+
wltpCo2: environmentEmissions.wltpCo2
|
|
72
69
|
},
|
|
73
70
|
consumption: {
|
|
74
71
|
fuel: consumption.fuel,
|
|
@@ -83,19 +80,14 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
|
|
|
83
80
|
|
|
84
81
|
const decoratedProps = getDecoratedProps(dataDecoratedProps, t, language);
|
|
85
82
|
const renderProperty = (renderProperties: any, vehicleComponentName?: any) => {
|
|
86
|
-
const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
|
|
95
|
-
smalltext: isConsumption && (vehicleComponentName !== 'search'),
|
|
96
|
-
hybridPlugin: engineData.hybridPlugin && isConsumption && vehicleComponentName !== 'search'
|
|
97
|
-
};
|
|
98
|
-
});
|
|
83
|
+
const mainPropertiesList = renderProperties(dataDecoratedProps.consumption.fuel, combineRefAlternative).map((prop: string) => ({
|
|
84
|
+
icon: decoratedProps[prop].icon,
|
|
85
|
+
description: decoratedProps[prop].value,
|
|
86
|
+
className: styles[decoratedProps[prop].name],
|
|
87
|
+
classNameIcon: (vehicleComponentName === 'search' || 'myVehicles' || 'favorite' || 'recently') && styles.carIconSearch,
|
|
88
|
+
smalltext: (decoratedProps[prop].name === 'consumptionCombined') && (vehicleComponentName !== 'search'),
|
|
89
|
+
hybridPlugin: engineData.hybridPlugin && decoratedProps[prop].name === 'consumptionCombined' && vehicleComponentName !== 'search'
|
|
90
|
+
}));
|
|
99
91
|
|
|
100
92
|
return mainPropertiesList.map((property: any, index: number) => (
|
|
101
93
|
<VehicleProperty {...property} key={index} />
|
|
@@ -157,12 +149,7 @@ const VehicleInfo: React.FC<IVehicleInfoProps> = (props) => {
|
|
|
157
149
|
),
|
|
158
150
|
...routeObj,
|
|
159
151
|
className: wrapClasses,
|
|
160
|
-
onClick: () => localStorage.setItem(
|
|
161
|
-
'activeTabCDP',
|
|
162
|
-
_get(leasing, 'isActive', false)
|
|
163
|
-
? t('vehicleProps:title.leasing')
|
|
164
|
-
: t('vehicleProps:title.financing')
|
|
165
|
-
),
|
|
152
|
+
onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
|
|
166
153
|
href: url,
|
|
167
154
|
target,
|
|
168
155
|
rel
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
.smallProp
|
|
13
13
|
span
|
|
14
|
-
font-size:
|
|
14
|
+
font-size: 10px !important
|
|
15
15
|
|
|
16
16
|
.pluginVal
|
|
17
17
|
span
|
|
@@ -26,8 +26,5 @@
|
|
|
26
26
|
+media-tablet-landscape-up()
|
|
27
27
|
margin-right: 10px
|
|
28
28
|
|
|
29
|
-
.noIcon
|
|
30
|
-
padding-left: 5px
|
|
31
|
-
|
|
32
29
|
[class*='smallText']
|
|
33
30
|
font-size:10px;
|
|
@@ -19,13 +19,12 @@ class VehicleProperty extends React.Component<IVehicleProperty, {}> {
|
|
|
19
19
|
|
|
20
20
|
render(): React.ReactNode {
|
|
21
21
|
const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
|
|
22
|
-
const
|
|
23
|
-
const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
|
|
22
|
+
const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''}`;
|
|
24
23
|
const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
|
|
25
24
|
|
|
26
25
|
return (
|
|
27
26
|
<div className={propertyClass}>
|
|
28
|
-
|
|
27
|
+
<IconSVG className={propertyClassIcon} name={icon} customDimensions />
|
|
29
28
|
<span>{description}</span>
|
|
30
29
|
</div>
|
|
31
30
|
);
|
|
@@ -48,7 +48,7 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
|
|
|
48
48
|
event.preventDefault();
|
|
49
49
|
event.stopPropagation();
|
|
50
50
|
event.nativeEvent.stopImmediatePropagation();
|
|
51
|
-
|
|
51
|
+
onFavoriteClick(event, id);
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
const renderFavoriteIcon = (): React.ReactNode => {
|
|
@@ -12,7 +12,6 @@ import VehicleTitle from './VehicleData/VehicleTitle/VehicleTitle';
|
|
|
12
12
|
import SeoText from './SeoText/SeoText';
|
|
13
13
|
import VehicleInfo from './VehicleData/VehicleInfo/VehicleInfo';
|
|
14
14
|
import VehiclePrice from './VehicleData/VehiclePrice/VehiclePrice';
|
|
15
|
-
import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
|
|
16
15
|
import {
|
|
17
16
|
IVehicleInfo,
|
|
18
17
|
IPrice,
|
|
@@ -180,7 +179,8 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
|
|
|
180
179
|
CircularProgressbar,
|
|
181
180
|
isReferenceSearch,
|
|
182
181
|
isAlternative,
|
|
183
|
-
typeAlternative
|
|
182
|
+
typeAlternative,
|
|
183
|
+
showDownPayment: !!(offer as any)?.showDownPayment
|
|
184
184
|
};
|
|
185
185
|
|
|
186
186
|
const favoriteProps = {
|
|
@@ -260,6 +260,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
|
|
|
260
260
|
t,
|
|
261
261
|
price,
|
|
262
262
|
showNewLabel,
|
|
263
|
+
showDownPayment: !!(offer as any)?.showDownPayment,
|
|
263
264
|
...stats
|
|
264
265
|
};
|
|
265
266
|
|
|
@@ -280,12 +281,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
|
|
|
280
281
|
target,
|
|
281
282
|
rel,
|
|
282
283
|
className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
|
|
283
|
-
onClick: () => localStorage.setItem(
|
|
284
|
-
'activeTabCDP',
|
|
285
|
-
_get(price, 'leasing.isActive', false)
|
|
286
|
-
? t('vehicleProps:title.leasing')
|
|
287
|
-
: t('vehicleProps:title.financing')
|
|
288
|
-
),
|
|
284
|
+
onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
|
|
289
285
|
href: url
|
|
290
286
|
})}
|
|
291
287
|
|
|
@@ -338,12 +334,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
|
|
|
338
334
|
target,
|
|
339
335
|
rel,
|
|
340
336
|
className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
|
|
341
|
-
onClick: () => localStorage.setItem(
|
|
342
|
-
'activeTabCDP',
|
|
343
|
-
_get(price, 'leasing.isActive', false)
|
|
344
|
-
? t('vehicleProps:title.leasing')
|
|
345
|
-
: t('vehicleProps:title.financing')
|
|
346
|
-
),
|
|
337
|
+
onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
|
|
347
338
|
href: url
|
|
348
339
|
})}
|
|
349
340
|
<VehicleInfo {...vehicleInfoProps} />
|
|
@@ -375,7 +366,7 @@ VehicleSmallCard.defaultProps = {
|
|
|
375
366
|
baseUrl: '',
|
|
376
367
|
typeAlternative: '',
|
|
377
368
|
offerSource: '',
|
|
378
|
-
src:
|
|
369
|
+
src: 'https://images.auto.de/noimage/small',
|
|
379
370
|
environmentEmissions: null,
|
|
380
371
|
language: 'en',
|
|
381
372
|
consumption: null,
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import { styled
|
|
2
|
-
|
|
3
|
-
// Cast to any to bypass MUI 5.9 styled() overload mismatch with strict TS in consumers (fe-landing).
|
|
4
|
-
const styled: any = muiStyled;
|
|
1
|
+
import { styled, createTheme } from '@mui/material/styles';
|
|
5
2
|
|
|
6
3
|
export const AccordionSummaryContent = styled('div')({
|
|
7
4
|
display: 'flex',
|
|
@@ -143,6 +143,27 @@ $indent = 10px
|
|
|
143
143
|
left: 6px
|
|
144
144
|
right: 6px
|
|
145
145
|
|
|
146
|
+
&.fourBadges
|
|
147
|
+
+media-tablet-landscape-up()
|
|
148
|
+
gap: 6px
|
|
149
|
+
.badgeItem
|
|
150
|
+
height: 18px
|
|
151
|
+
font-size: 10px
|
|
152
|
+
min-width: 30px
|
|
153
|
+
.badgeFull
|
|
154
|
+
display: none
|
|
155
|
+
.badgeShort
|
|
156
|
+
display: inline
|
|
157
|
+
|
|
158
|
+
.badgeItem
|
|
159
|
+
// hook class for compact-mode overrides
|
|
160
|
+
|
|
161
|
+
.badgeFull
|
|
162
|
+
display: inline
|
|
163
|
+
|
|
164
|
+
.badgeShort
|
|
165
|
+
display: none
|
|
166
|
+
|
|
146
167
|
.priceDifferencePerCent
|
|
147
168
|
margin-left: auto;
|
|
148
169
|
|
|
@@ -21,6 +21,8 @@ export type TPrice = {
|
|
|
21
21
|
historyPriceDifference?: number;
|
|
22
22
|
historyPriceDifferencePerCent?: number;
|
|
23
23
|
vatRate?: number | null;
|
|
24
|
+
financing?: { firstInstallment?: number; [key: string]: any };
|
|
25
|
+
leasing?: { firstInstallment?: number; [key: string]: any };
|
|
24
26
|
};
|
|
25
27
|
|
|
26
28
|
export interface IStatsWrapperProps {
|
|
@@ -31,6 +33,7 @@ export interface IStatsWrapperProps {
|
|
|
31
33
|
statsData?: IStatsData;
|
|
32
34
|
imagesCount?: number;
|
|
33
35
|
showNewLabel?: boolean;
|
|
36
|
+
showDownPayment?: boolean;
|
|
34
37
|
onFavoriteClick?: (event: any) => void;
|
|
35
38
|
getCarImagesData?: (carId: string, force?: boolean, includeAll?: boolean, type?: any, typeAlternative?: string) => Promise<any>;
|
|
36
39
|
[key: string]: any;
|
|
@@ -48,6 +51,7 @@ const withStats = (WrappedComponent: any) => ({
|
|
|
48
51
|
onSlideChange,
|
|
49
52
|
classWrapPrice = '',
|
|
50
53
|
showNewLabel = false,
|
|
54
|
+
showDownPayment = false,
|
|
51
55
|
statsSize = 'xs',
|
|
52
56
|
price: { historyPriceDifference = 0, historyPriceDifferencePerCent = 0 },
|
|
53
57
|
...props
|
|
@@ -137,20 +141,33 @@ const withStats = (WrappedComponent: any) => ({
|
|
|
137
141
|
|
|
138
142
|
const renderPriceData = () => {
|
|
139
143
|
const newText = !!t ? t('vehicleProps:promoSlider.new') : 'neu';
|
|
144
|
+
const downPaymentText = !!t ? t('vehicleProps:promoSlider.downPayment') : '0\u20AC Anzahlung';
|
|
145
|
+
const downPaymentShortText = !!t ? t('vehicleProps:promoSlider.downPaymentShort') : '0\u20AC Anz.';
|
|
140
146
|
const EUR = `\u20AC`;
|
|
141
147
|
|
|
148
|
+
const allFourActive = showNewLabel
|
|
149
|
+
&& !!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE
|
|
150
|
+
&& showDownPayment
|
|
151
|
+
&& !!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT;
|
|
152
|
+
|
|
142
153
|
return (
|
|
143
|
-
<div className={classnames(styles.topWrapper, classWrapPrice)}>
|
|
144
|
-
{showNewLabel && <Badge type='blue' className={styles.new}>{newText}</Badge>}
|
|
154
|
+
<div className={classnames(styles.topWrapper, classWrapPrice, { [styles.fourBadges]: allFourActive })}>
|
|
155
|
+
{showNewLabel && <Badge type='blue' className={classnames(styles.new, styles.badgeItem)}>{newText}</Badge>}
|
|
145
156
|
{!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
|
|
146
|
-
<Badge type='green'>
|
|
157
|
+
<Badge type='green' className={styles.badgeItem}>
|
|
147
158
|
{`-`}
|
|
148
159
|
<FormattedNumber value={historyPriceDifference} numbersAfterDot={0} />
|
|
149
160
|
{` ${EUR}`}
|
|
150
161
|
</Badge>
|
|
151
162
|
)}
|
|
163
|
+
{showDownPayment && (
|
|
164
|
+
<Badge type='lightBlue' className={styles.badgeItem}>
|
|
165
|
+
<span className={styles.badgeFull}>{downPaymentText}</span>
|
|
166
|
+
<span className={styles.badgeShort}>{downPaymentShortText}</span>
|
|
167
|
+
</Badge>
|
|
168
|
+
)}
|
|
152
169
|
{!!historyPriceDifferencePerCent && historyPriceDifferencePerCent >= MIN_PERCENT && (
|
|
153
|
-
<Badge type='red' className={styles.priceDifferencePerCent}>-{historyPriceDifferencePerCent}%</Badge>
|
|
170
|
+
<Badge type='red' className={classnames(styles.priceDifferencePerCent, styles.badgeItem)}>-{historyPriceDifferencePerCent}%</Badge>
|
|
154
171
|
)}
|
|
155
172
|
</div>
|
|
156
173
|
);
|
|
@@ -69,7 +69,6 @@ export const transformDataForDecoratedCar = (car: any) => {
|
|
|
69
69
|
bootCapacity: _get(car, 'sizeVolumeWeight.cargoCapacity', null),
|
|
70
70
|
capacityLoad: _get(car, 'sizeVolumeWeight.completeCapacity', null),
|
|
71
71
|
wltpCo2: _get(car, 'environmentEmissions.wltpCo2', null),
|
|
72
|
-
wltpEnergyEfficiencyClass: _get(car, 'environmentEmissions.wltpEnergyEfficiencyClass', null),
|
|
73
72
|
pluginHybrid: _get(car, 'engineData.pluginHybrid', null),
|
|
74
73
|
wltpCombined: _get(car, 'consumption.wltpCombined', null),
|
|
75
74
|
wltpPowerCombined: _get(car, 'consumption.wltpPowerCombined', null),
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
const
|
|
2
|
-
const _isIP = /^\d+\.\d+\.\d+\.\d+(:\d+)?$/.test(_rawHost);
|
|
3
|
-
const _imgBase = _isIP ? 'https://images.auto.de' : 'https://images.' + _rawHost;
|
|
1
|
+
export const SITE_DOMAIN: string = 'https://www.auto.de';
|
|
4
2
|
|
|
5
|
-
export const
|
|
6
|
-
|
|
7
|
-
export const
|
|
8
|
-
export const PLACEHOLDER_IMAGE_SMALL_URL: string = _imgBase + '/noimage/small';
|
|
9
|
-
export const PLACEHOLDER_IMAGE_LARGE_URL: string = _imgBase + '/noimage/large';
|
|
3
|
+
export const PLACEHOLDER_IMAGE: string = 'https://images.auto.de/noimage/';
|
|
4
|
+
export const PLACEHOLDER_IMAGE_SMALL_URL: string = `https://images.auto.de/noimage/noimage/small`;
|
|
5
|
+
export const PLACEHOLDER_IMAGE_LARGE_URL: string = `https://images.auto.de/noimage/noimage/large`;
|
|
10
6
|
|
|
11
7
|
export const QUOTES_SLIDES_TO_SHOW_DEFAULT = 3;
|
|
12
8
|
|