@wayke-se/components-react 3.4.0 → 3.5.0

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.
@@ -1,13 +1,15 @@
1
1
  import React, { useState, useCallback } from 'react';
2
2
  import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
3
3
  import { FacetIdToTitle } from '../../utils/formats';
4
- import { PRICE, MILEAGE, MODEL_YEAR } from '../../utils/constants';
4
+ import { PRICE, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
5
5
  import useSearch from '../../State/Search/useSearch';
6
6
  import FilterPanel from '../FilterPanel/index';
7
7
  const isSelected = (f, searchParams) => {
8
8
  switch (f.id) {
9
9
  case PRICE:
10
10
  case MILEAGE:
11
+ case LEASING_PRICE:
12
+ case BUSINESS_LEASING_PRICE:
11
13
  case MODEL_YEAR:
12
14
  return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
13
15
  default:
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import CheckListFacet from './checkListFacet';
3
3
  import ColorSelectFacet from './colorFacet';
4
4
  import RangeFacet from './rangeFacet';
5
- import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, } from '../../utils/constants';
5
+ import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
6
6
  const FacetSelector = ({ facet }) => {
7
7
  switch (facet.id) {
8
8
  case MANUFACTURER:
@@ -18,6 +18,7 @@ const FacetSelector = ({ facet }) => {
18
18
  return React.createElement(ColorSelectFacet, { facet: facet });
19
19
  case PRICE:
20
20
  return React.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
21
+ case BUSINESS_LEASING_PRICE:
21
22
  case LEASING_PRICE:
22
23
  return React.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
23
24
  case MILEAGE:
@@ -49,10 +49,12 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
49
49
  {
50
50
  title: document.fuelType,
51
51
  },
52
- ], price: `${numberSeparator(document.price)} kr`, leasingPrice: document.leasingPrice !== undefined
53
- ? `${numberSeparator(document.leasingPrice)} kr`
54
- : undefined, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
52
+ ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
55
53
  ? `${numberSeparator(document.oldPrice)} kr`
54
+ : undefined, leasingPrice: document.leasingPrice !== undefined
55
+ ? `${numberSeparator(document.leasingPrice)} kr/mån`
56
+ : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
57
+ ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
56
58
  : undefined })));
57
59
  }))));
58
60
  };
@@ -4,7 +4,7 @@ import { Wrapper, Image, Picture, Source, Img, Content, ContentBody, ContentFoot
4
4
  import UspList from '../UspList/index';
5
5
  import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
6
6
  import usePath from '../../State/Path/usePath';
7
- const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
7
+ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
8
8
  const { pushState } = usePath();
9
9
  const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
10
10
  const onHrefClick = useCallback((e) => {
@@ -35,7 +35,10 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
35
35
  oldPrice ? React.createElement(OldPrice, null, oldPrice) : React.createElement(Label, null, "Pris"),
36
36
  React.createElement(CurrentPrice, null, price)),
37
37
  leasingPrice && (React.createElement(PriceCell, null,
38
- React.createElement(Label, null, "Leasingpris"),
39
- React.createElement(CurrentPrice, null, leasingPrice))))))));
38
+ React.createElement(Label, null, "Privatleasing"),
39
+ React.createElement(CurrentPrice, null, leasingPrice))),
40
+ businessLeasingPrice && (React.createElement(PriceCell, null,
41
+ React.createElement(Label, null, "F\u00F6retagsleasing"),
42
+ React.createElement(CurrentPrice, null, businessLeasingPrice))))))));
40
43
  };
41
44
  export default ProductCard;
@@ -58,6 +58,10 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
58
58
  },
59
59
  ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
60
60
  ? `${numberSeparator(document.oldPrice)} kr`
61
+ : undefined, leasingPrice: document.leasingPrice !== undefined
62
+ ? `${numberSeparator(document.leasingPrice)} kr/mån`
63
+ : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
64
+ ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
61
65
  : undefined, pathRoute: pathRoute })));
62
66
  })))))));
63
67
  };
@@ -11,6 +11,7 @@ export const PRICE = 'price';
11
11
  export const MILEAGE = 'mileage';
12
12
  export const MODEL_YEAR = 'modelYear';
13
13
  export const LEASING_PRICE = 'leasingPrice';
14
+ export const BUSINESS_LEASING_PRICE = 'businessLeasingPrice';
14
15
  export const COLOR_WHITE = { displayName: 'Vit', hex: '#ffffff' };
15
16
  export const COLOR_BLACK = { displayName: 'Svart', hex: '#000000' };
16
17
  export const COLOR_GRAY = { displayName: 'Grå', hex: '#808080' };
@@ -10,7 +10,7 @@ export const numberSeparator = (value, n = 0, x = 3, s = ' ', c = '.') => {
10
10
  const num = value.toFixed(Math.max(0, ~~n));
11
11
  return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), `$&${s || ','}`);
12
12
  };
13
- import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, } from './constants';
13
+ import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from './constants';
14
14
  export const FacetIdToTitle = (f) => {
15
15
  switch (f) {
16
16
  case MANUFACTURER:
@@ -39,6 +39,8 @@ export const FacetIdToTitle = (f) => {
39
39
  return 'Modellår';
40
40
  case LEASING_PRICE:
41
41
  return 'Privatleasing';
42
+ case BUSINESS_LEASING_PRICE:
43
+ return 'Företagsleasing';
42
44
  default:
43
45
  return f;
44
46
  }
@@ -1,4 +1,4 @@
1
- export declare type SearchFilterNameTypes = 'manufacturer' | 'modelSeries' | 'fuelType' | 'gearboxType' | 'branch' | 'color' | 'environmentClass' | 'properties.segment' | 'drivingWheel' | 'price' | 'mileage' | 'modelYear';
1
+ export declare type SearchFilterNameTypes = 'manufacturer' | 'modelSeries' | 'fuelType' | 'gearboxType' | 'branch' | 'color' | 'environmentClass' | 'properties.segment' | 'drivingWheel' | 'price' | 'mileage' | 'modelYear' | 'leasingPrice' | 'businessLeasingPrice';
2
2
  export declare type SearchFilterTypes = {
3
3
  filterName: SearchFilterNameTypes;
4
4
  displayName?: string;
@@ -73,6 +73,7 @@ export interface Document {
73
73
  shortDescription: string;
74
74
  title: string;
75
75
  leasingPrice?: number;
76
+ businessLeasingPrice?: number;
76
77
  }
77
78
  export interface FacetFilter {
78
79
  displayName: string;
@@ -12,7 +12,8 @@ interface Props {
12
12
  price: string;
13
13
  leasingPrice?: string;
14
14
  oldPrice?: string;
15
+ businessLeasingPrice?: string;
15
16
  onClick?: (id: string) => void;
16
17
  }
17
- declare const ProductCard: ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }: Props) => JSX.Element;
18
+ declare const ProductCard: ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }: Props) => JSX.Element;
18
19
  export default ProductCard;
@@ -11,6 +11,7 @@ export declare const PRICE = "price";
11
11
  export declare const MILEAGE = "mileage";
12
12
  export declare const MODEL_YEAR = "modelYear";
13
13
  export declare const LEASING_PRICE = "leasingPrice";
14
+ export declare const BUSINESS_LEASING_PRICE = "businessLeasingPrice";
14
15
  export declare const COLOR_WHITE: {
15
16
  displayName: string;
16
17
  hex: string;
package/dist-web/index.js CHANGED
@@ -476,6 +476,7 @@ const PRICE = 'price';
476
476
  const MILEAGE = 'mileage';
477
477
  const MODEL_YEAR = 'modelYear';
478
478
  const LEASING_PRICE = 'leasingPrice';
479
+ const BUSINESS_LEASING_PRICE = 'businessLeasingPrice';
479
480
  const COLOR_WHITE = { displayName: 'Vit', hex: '#ffffff' };
480
481
  const COLOR_BLACK = { displayName: 'Svart', hex: '#000000' };
481
482
  const COLOR_GRAY = { displayName: 'Grå', hex: '#808080' };
@@ -532,6 +533,8 @@ const FacetIdToTitle = (f) => {
532
533
  return 'Modellår';
533
534
  case LEASING_PRICE:
534
535
  return 'Privatleasing';
536
+ case BUSINESS_LEASING_PRICE:
537
+ return 'Företagsleasing';
535
538
  default:
536
539
  return f;
537
540
  }
@@ -1609,6 +1612,7 @@ const FacetSelector = ({ facet }) => {
1609
1612
  return React__default.createElement(ColorSelectFacet, { facet: facet });
1610
1613
  case PRICE:
1611
1614
  return React__default.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
1615
+ case BUSINESS_LEASING_PRICE:
1612
1616
  case LEASING_PRICE:
1613
1617
  return React__default.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
1614
1618
  case MILEAGE:
@@ -1641,6 +1645,8 @@ const isSelected = (f, searchParams) => {
1641
1645
  switch (f.id) {
1642
1646
  case PRICE:
1643
1647
  case MILEAGE:
1648
+ case LEASING_PRICE:
1649
+ case BUSINESS_LEASING_PRICE:
1644
1650
  case MODEL_YEAR:
1645
1651
  return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
1646
1652
  default:
@@ -1954,7 +1960,7 @@ const usePath = () => {
1954
1960
  return context;
1955
1961
  };
1956
1962
 
1957
- const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
1963
+ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
1958
1964
  const { pushState } = usePath();
1959
1965
  const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
1960
1966
  const onHrefClick = useCallback((e) => {
@@ -1985,8 +1991,11 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
1985
1991
  oldPrice ? React__default.createElement(OldPrice, null, oldPrice) : React__default.createElement(Label$3, null, "Pris"),
1986
1992
  React__default.createElement(CurrentPrice, null, price)),
1987
1993
  leasingPrice && (React__default.createElement(PriceCell, null,
1988
- React__default.createElement(Label$3, null, "Leasingpris"),
1989
- React__default.createElement(CurrentPrice, null, leasingPrice))))))));
1994
+ React__default.createElement(Label$3, null, "Privatleasing"),
1995
+ React__default.createElement(CurrentPrice, null, leasingPrice))),
1996
+ businessLeasingPrice && (React__default.createElement(PriceCell, null,
1997
+ React__default.createElement(Label$3, null, "F\u00F6retagsleasing"),
1998
+ React__default.createElement(CurrentPrice, null, businessLeasingPrice))))))));
1990
1999
  };
1991
2000
 
1992
2001
  const resolveImage = (document) => {
@@ -2036,10 +2045,12 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
2036
2045
  {
2037
2046
  title: document.fuelType,
2038
2047
  },
2039
- ], price: `${numberSeparator(document.price)} kr`, leasingPrice: document.leasingPrice !== undefined
2040
- ? `${numberSeparator(document.leasingPrice)} kr`
2041
- : undefined, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
2048
+ ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
2042
2049
  ? `${numberSeparator(document.oldPrice)} kr`
2050
+ : undefined, leasingPrice: document.leasingPrice !== undefined
2051
+ ? `${numberSeparator(document.leasingPrice)} kr/mån`
2052
+ : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
2053
+ ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
2043
2054
  : undefined })));
2044
2055
  }))));
2045
2056
  };
@@ -5947,6 +5958,10 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
5947
5958
  },
5948
5959
  ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
5949
5960
  ? `${numberSeparator(document.oldPrice)} kr`
5961
+ : undefined, leasingPrice: document.leasingPrice !== undefined
5962
+ ? `${numberSeparator(document.leasingPrice)} kr/mån`
5963
+ : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
5964
+ ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
5950
5965
  : undefined, pathRoute: pathRoute })));
5951
5966
  })))))));
5952
5967
  };