@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.
Files changed (190) hide show
  1. package/bytebrand-fe-ui-core-4.8.47.tgz +0 -0
  2. package/media/locales/de/promoSlider.json +0 -1
  3. package/media/locales/en/promoSlider.json +0 -1
  4. package/package.json +5 -3
  5. package/source/components/AccordionWidget/AccordionWidget.styl +0 -1
  6. package/source/components/AccordionWidget/AccordionWidget.tsx +4 -8
  7. package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.tsx +11 -23
  8. package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx +6 -1
  9. package/source/components/VehicleDetailedSlider/partials/PriceData.tsx +9 -8
  10. package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.styl +0 -5
  11. package/source/components/VehicleSmallCard/VehicleData/VechiclePriceItem/VechiclePriceItem.tsx +1 -3
  12. package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl +1 -1
  13. package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.tsx +11 -24
  14. package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl +2 -3
  15. package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl +1 -4
  16. package/source/components/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx +2 -3
  17. package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx +1 -1
  18. package/source/components/VehicleSmallCard/VehicleSmallCard.tsx +6 -15
  19. package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx +1 -4
  20. package/source/components/_common/withStats/withStats.styl +21 -0
  21. package/source/components/_common/withStats/withStats.tsx +21 -4
  22. package/source/framework/DataTransformers.ts +0 -1
  23. package/source/framework/constants/common.ts +4 -8
  24. package/source/framework/types/types.ts +0 -1
  25. package/source/framework/vehiclesProps/decoratedLightProps.tsx +12 -48
  26. package/source/framework/vehiclesProps/decoratedProps.tsx +8 -35
  27. package/source/locales/data.ts +5 -4
  28. package/.husky/pre-push +0 -4
  29. package/.storybook/addons.js +0 -4
  30. package/.storybook/config.js +0 -64
  31. package/.storybook/postcss.config.js +0 -6
  32. package/.storybook/preview-head.html +0 -10
  33. package/.storybook/webpack.config.js +0 -130
  34. package/__tests__/components/Checkout/OrderOverviewItem/OrderOverviewItem.test.tsx +0 -42
  35. package/__tests__/components/Checkout/PaymentTypeCard/PaymentTypeCard.test.tsx +0 -50
  36. package/__tests__/components/Checkout/RadioGroup.test.tsx +0 -95
  37. package/__tests__/components/Checkout/ServiceCardWrapper.test.tsx +0 -53
  38. package/__tests__/components/Checkout/Switcher.test.tsx +0 -43
  39. package/__tests__/components/UserDasboardPage/sections/CheckoutSection/CheckoutSection.test.tsx +0 -613
  40. package/__tests__/components/UserDasboardPage/sections/FavoriteSection/FavoriteSection.test.tsx +0 -335
  41. package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/AdditionalOrderInfo.test.tsx +0 -127
  42. package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCar.test.tsx +0 -58
  43. package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusCard.test.tsx +0 -74
  44. package/__tests__/components/UserDasboardPage/sections/OrderStatusSection/OrderStatusSection.test.tsx +0 -62
  45. package/__tests__/components/UserDasboardPage/sections/RequestedCarsSection/RequestedCarsSection.test.tsx +0 -117
  46. package/__tests__/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.test.tsx +0 -58
  47. package/__tests__/components/VehicleSmallCard/VehicleInfo.test.tsx +0 -88
  48. package/__tests__/components/VehicleSmallCard/VehicleTitle.test.tsx +0 -91
  49. package/__tests__/components/_common/Badge/Badge.test.tsx +0 -15
  50. package/__tests__/components/_common/IconSVG/IconSVG.test.tsx +0 -23
  51. package/__tests__/components/_common/Image/Image.test.tsx +0 -82
  52. package/__tests__/components/_common/MaterialAutocomplete/MaterialAutocomplete.test.tsx +0 -49
  53. package/__tests__/components/_common/MaterialDatePicker/MaterialDatePicker.test.tsx +0 -54
  54. package/__tests__/components/_common/MaterialField/MaterialField.test.tsx +0 -58
  55. package/__tests__/components/_common/StarButton/StarButton.test.tsx +0 -46
  56. package/__tests__/mockedData/financingConfig.js +0 -202
  57. package/__tests__/mockedData/mockedPendingRequestedCar.js +0 -69
  58. package/__tests__/utils/CommonUtils/addPrefixToKeys.test.ts +0 -18
  59. package/__tests__/utils/CommonUtils/arrToObj.test.js +0 -32
  60. package/__tests__/utils/CommonUtils/checkRangeValuesOnEqual.test.ts +0 -17
  61. package/__tests__/utils/CommonUtils/fixNumber.test.ts +0 -20
  62. package/__tests__/utils/CommonUtils/formatMileage.test.ts +0 -8
  63. package/__tests__/utils/CommonUtils/getChipFilterValue.test.ts +0 -22
  64. package/__tests__/utils/CommonUtils/getFormattedNumber.test.ts +0 -19
  65. package/__tests__/utils/CommonUtils/getFormattedPrice.test.ts +0 -19
  66. package/__tests__/utils/CommonUtils/getGroupValuesForQuery.test.ts +0 -51
  67. package/__tests__/utils/CommonUtils/getOfferSliders.test.ts +0 -64
  68. package/__tests__/utils/CommonUtils/getPriceRating.test.ts +0 -26
  69. package/__tests__/utils/CommonUtils/getPriceRatingConfig.test.ts +0 -33
  70. package/__tests__/utils/CommonUtils/preloadNearbyImages.test.ts +0 -9
  71. package/__tests__/utils/CommonUtils/sliceLessThan.test.ts +0 -23
  72. package/__tests__/utils/CommonUtils/sliceMoreThan.test.ts +0 -23
  73. package/source/components/AdvantageItem/AdvantageItem.story.js +0 -23
  74. package/source/components/Alternative/Dealer.story.js +0 -32
  75. package/source/components/Alternative/Dealer.story.styl +0 -3
  76. package/source/components/Breadcrumbs/Breadcrumbs.story.js +0 -40
  77. package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.story.js +0 -45
  78. package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.js +0 -243
  79. package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.styl +0 -21
  80. package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.js +0 -105
  81. package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.styl +0 -37
  82. package/source/components/Checkout/Switcher/Switcher.story.js +0 -41
  83. package/source/components/Checkout/Switcher/Switcher.story.styl +0 -2
  84. package/source/components/CompactSearchWidget/CompactSearchWidget.story.js +0 -187
  85. package/source/components/ContactForm/ContactForm.story.js +0 -94
  86. package/source/components/ContactForm/ContactForm.story.styl +0 -0
  87. package/source/components/ContactInfo/ContactInfo.story.js +0 -58
  88. package/source/components/CustomerQuote/CustomerQuote.story.js +0 -41
  89. package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.js +0 -73
  90. package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.styl +0 -5
  91. package/source/components/FormattedNumber/FormattedNumber.story.js +0 -114
  92. package/source/components/InfoBlocks/InfoBlockWrapper.story.js +0 -101
  93. package/source/components/InfoBlocks/InfoBlockWrapper.story.styl +0 -46
  94. package/source/components/OfferPanel/AboAccordion/AboFaq/AboFaq.story.js +0 -97
  95. package/source/components/OfferPanel/OfferPanel.story.js +0 -139
  96. package/source/components/OfferPanel/RangeGroup/RangeGroup.story.js +0 -35
  97. package/source/components/OfferPanel/RangeGroup/RangeGroup.story.styl +0 -3
  98. package/source/components/PriceRating/PriceRating.story.js +0 -39
  99. package/source/components/PriceRating/PriceRating.story.styl +0 -2
  100. package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.js +0 -78
  101. package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.styl +0 -11
  102. package/source/components/RateSearchValue/RateSearchValue.story.js +0 -78
  103. package/source/components/RateSearchValue/RateSearchValue.story.styl +0 -2
  104. package/source/components/RateSearchWidget/RateSearchWidget.story.js +0 -57
  105. package/source/components/RateSearchWidget/RateSearchWidget.story.styl +0 -12
  106. package/source/components/SearchFilters/FiltersFactory.story.js +0 -273
  107. package/source/components/SearchPage/Filters/MakeModel/MakeModel.story.js +0 -12
  108. package/source/components/SearchWidget/BasicDataWidget/BasicDataWidget.story.js +0 -834
  109. package/source/components/SearchWidget/BasicDataWidget/BasicDataWidget.story.styl +0 -40
  110. package/source/components/SearchWidget/SearchWidget.story.js +0 -191
  111. package/source/components/SearchWidget/SearchWidget.story.styl +0 -6
  112. package/source/components/Stepper/Stepper.story.js +0 -119
  113. package/source/components/Stepper/Stepper.story.styl +0 -41
  114. package/source/components/Theme.story.js +0 -36
  115. package/source/components/Theme.story.styl +0 -85
  116. package/source/components/TickerText/TickerText.story.js +0 -17
  117. package/source/components/UserDashboardPage/sections/OrderStatusSection/OrderStatusSection.story.js +0 -95
  118. package/source/components/UserDashboardPage/sections/RequestedCarsSection/RequestedCarsSection.story.js +0 -97
  119. package/source/components/Vehicle/VehicleConsumption/VehicleConsumption.story.js +0 -31
  120. package/source/components/Vehicle/VehicleFormattedPrice/VehicleFormattedPrice.story.js +0 -247
  121. package/source/components/VehicleCompared/CompareGeneral/CompareGeneral.story.js +0 -30
  122. package/source/components/VehicleCompared/ComparePrice/ComparePrice.story.js +0 -18
  123. package/source/components/VehicleCompared/CompareTitle/CompareTitle.story.js +0 -19
  124. package/source/components/VehicleDetailedSidebar/VehicleDetailedSidebar.story.js +0 -44
  125. package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.story.js +0 -120
  126. package/source/components/VehiclePromoSlider/VehiclePromoInfo/VehiclePromoInfo.story.js +0 -42
  127. package/source/components/VehiclePromoSlider/VehiclePromoSlide/VehiclePromoSlide.story.js +0 -62
  128. package/source/components/VehiclePromoSlider/VehiclePromoSlider.story.js +0 -42
  129. package/source/components/VehicleSmallCard/VehicleSmallCard.story.js +0 -412
  130. package/source/components/VehicleSmallCard/VehicleSmallCard.story.styl +0 -56
  131. package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.js +0 -199
  132. package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.styl +0 -40
  133. package/source/components/_common/Accordion/Accordion.story.js +0 -36
  134. package/source/components/_common/Badge/Badge.story.js +0 -27
  135. package/source/components/_common/Badge/Badge.story.styl +0 -5
  136. package/source/components/_common/Bubble/Bubble.story.js +0 -52
  137. package/source/components/_common/Button/Button.story.js +0 -52
  138. package/source/components/_common/Button/Button.story.styl +0 -5
  139. package/source/components/_common/ButtonOld/Button.story.js +0 -54
  140. package/source/components/_common/ButtonOld/Button.story.styl +0 -5
  141. package/source/components/_common/Checkbox/Checkbox.story.js +0 -85
  142. package/source/components/_common/Checkbox/Checkbox.story.styl +0 -14
  143. package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.js +0 -126
  144. package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.styl +0 -14
  145. package/source/components/_common/Chip/Chip.story.js +0 -43
  146. package/source/components/_common/ChipList/ChipList.story.js +0 -36
  147. package/source/components/_common/DropDown/DropDown.story.js +0 -35
  148. package/source/components/_common/ExpandablePanel/ExpandablePanel.story.js +0 -41
  149. package/source/components/_common/Histogram/Histogram.story.js +0 -51
  150. package/source/components/_common/IconSVG/IconSVG.story.js +0 -21
  151. package/source/components/_common/IconSVG/IconSVG.story.styl +0 -25
  152. package/source/components/_common/Image/Image.story.js +0 -142
  153. package/source/components/_common/Image/Image.story.styl +0 -18
  154. package/source/components/_common/ImagesSet/ImagesSet.story.js +0 -34
  155. package/source/components/_common/ImagesSet/ImagesSet.story.styl +0 -4
  156. package/source/components/_common/Loader/Loader.story.js +0 -21
  157. package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.story.js +0 -49
  158. package/source/components/_common/MaterialDatePicker/MaterialDatePicker.story.js +0 -45
  159. package/source/components/_common/MaterialDatePicker/MaterialDatePicker.story.styl +0 -6
  160. package/source/components/_common/MaterialField/MaterialField.story.js +0 -87
  161. package/source/components/_common/MaterialField/MaterialField.story.styl +0 -34
  162. package/source/components/_common/MaterialSelect/MaterialSelect.story.js +0 -52
  163. package/source/components/_common/MaterialSelect/MaterialSelect.story.styl +0 -6
  164. package/source/components/_common/MaterialStepButton/MaterialStepButton.story.js +0 -47
  165. package/source/components/_common/MaterialStepButton/MaterialStepButton.story.styl +0 -6
  166. package/source/components/_common/MaterialSwitch/MaterialSwitch.story.js +0 -17
  167. package/source/components/_common/MaterialTooltip/MaterialTooltip.story.js +0 -10
  168. package/source/components/_common/Modal/Modal.story.js +0 -37
  169. package/source/components/_common/MuiGroupedSelect/MuiGroupedSelect.story.js +0 -21
  170. package/source/components/_common/PropertySelector/PSGroup.story.js +0 -93
  171. package/source/components/_common/PropertySelector/PSGroup.story.styl +0 -25
  172. package/source/components/_common/PropertySelector/ProperySelector.story.js +0 -83
  173. package/source/components/_common/Radio/FormRadioGroup.story.js +0 -28
  174. package/source/components/_common/Radio/FormRadioGroup.story.styl +0 -2
  175. package/source/components/_common/Radio/Radio.story.js +0 -54
  176. package/source/components/_common/Radio/RadioGroup.story.js +0 -90
  177. package/source/components/_common/Radio/RadioGroup.story.styl +0 -39
  178. package/source/components/_common/Range/Range.story.js +0 -46
  179. package/source/components/_common/Range/Range.story.styl +0 -5
  180. package/source/components/_common/SliderArrow/SliderArrow.story.js +0 -18
  181. package/source/components/_common/Tabs/Tabs.story.js +0 -56
  182. package/source/components/_common/TimePicker/TimePicker.story.js +0 -37
  183. package/source/components/_common/Tooltip/Tooltip.story.js +0 -28
  184. package/source/components/_common/UserMenu/MaterialMenu.story.js +0 -73
  185. package/source/components/_common/VehicleSlider/VehicleSlider.story.js +0 -99
  186. package/source/components/_common/VehicleSlider/VehicleSlider.story.styl +0 -0
  187. package/source/components/_common/withLabel/withLabel.story.js +0 -62
  188. package/source/components/_common/withPopover/withPopover.story.js +0 -48
  189. package/source/components/_common/withPopover/withPopover.story.styl +0 -54
  190. 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.46",
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": "^0.7.5",
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
- "prepare": "husky",
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",
@@ -191,7 +191,6 @@
191
191
  height: 45px
192
192
  border-bottom 1px solid $grey-e
193
193
  text-transform: none
194
- font-size: 11px
195
194
 
196
195
  +media-tablet-landscape-down()
197
196
  padding-top: 7px;
@@ -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 === '' ? '' : (prop.icon || 'no-image')}
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
- const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
106
- return {
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, useRef, FunctionComponent } from 'react';
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
- const activeTab = tabsTitles.findIndex(({ title }: { title: string }) => {
113
- return title === getlocalStorageActiveTabCDP;
114
- });
115
- if (activeTab === -1) {
116
- setActiveTab(null, 0);
117
- } else {
118
- setActiveTab(null, activeTab);
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
- }, [pathname, activeTab, price]); // tslint:disable-line:align
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
- financingConfig?:any;
14
- activeTab?:number;
15
- showDownPayment:boolean;
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, financingConfig, activeTab }) => {
23
- const percentageOfFirstInstallment = activeTab === 0 ? financingConfig!.financing.percentageOfFirstInstallment : financingConfig!.leasing.percentageOfFirstInstallment;
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
- {(!isNil(percentageOfFirstInstallment) && activeTab !== 2 && showDownPayment) &&
34
- <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`${percentageOfFirstInstallment}${percentageOfFirstInstallment > 0 ? '%' : EUR} ${t('slider.firstInstallment')}`}</Badge>}
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}%
@@ -70,11 +70,6 @@
70
70
  +media-tablet-landscape-up()
71
71
  font-size: 9px;
72
72
 
73
- &.priceItemCategoryLanding,
74
- &.priceItemCategoryMain
75
- +media-tablet-landscape-up()
76
- font-size: 10px;
77
-
78
73
  & > span:hover
79
74
  background: rgba(196, 196, 196, 0.6);
80
75
 
@@ -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 (
@@ -12,7 +12,7 @@
12
12
  grid-area: info;
13
13
 
14
14
  & > .consumptionCombined
15
- font-size: 9px
15
+ font-size: 10px
16
16
 
17
17
  +media-tablet-landscape-down()
18
18
  padding: 0 10px;
@@ -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
- const isConsumption = decoratedProps[prop].name === 'consumptionCombined';
88
- // On non-SRL cards drop the fuel-pump icon next to the consumption row to free up space for the CO2-class line.
89
- const hideConsumptionIcon = isConsumption && vehicleComponentName !== 'search';
90
- return {
91
- icon: hideConsumptionIcon ? '' : decoratedProps[prop].icon,
92
- description: decoratedProps[prop].value,
93
- className: styles[decoratedProps[prop].name],
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
@@ -62,9 +62,8 @@
62
62
  font-size: 12px;
63
63
  height: 42px;
64
64
 
65
- &.vehiclePriceTitleLanding,
66
- &.vehiclePriceTitleMain
67
- font-size: 10px;
65
+ &.vehiclePriceTitleLanding
66
+ font-size: 11px;
68
67
  height: 38px;
69
68
 
70
69
  .addOfferButton
@@ -11,7 +11,7 @@
11
11
 
12
12
  .smallProp
13
13
  span
14
- font-size: 9px !important
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 noIcon: boolean = !icon;
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
- {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
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
- if (onFavoriteClick) onFavoriteClick(event, id);
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: PLACEHOLDER_IMAGE_SMALL_URL,
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 as muiStyled, createTheme } from '@mui/material/styles';
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 _rawHost = typeof window !== 'undefined' ? window.location.host.replace('www.', '') : 'auto.de';
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 SITE_DOMAIN: string = typeof window !== 'undefined' ? 'https://' + window.location.host : 'https://www.auto.de';
6
-
7
- export const PLACEHOLDER_IMAGE: string = _imgBase + '/noimage/';
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
 
@@ -115,7 +115,6 @@ export interface IVehicleInfo {
115
115
  url?: string;
116
116
  target?: string;
117
117
  rel?: string;
118
- leasing?: ILeasing;
119
118
  }
120
119
 
121
120
  export interface IVehicleTitleProps {