@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.
- package/README.md +3 -3
- package/dist-node/index.js +13 -3
- package/dist-node/index.js.map +1 -1
- package/dist-src/components/Filter/index.js +3 -1
- package/dist-src/components/FilterPanel/faceSelector.js +2 -1
- package/dist-src/components/Grid/index.js +5 -3
- package/dist-src/components/ProductCard/index.js +6 -3
- package/dist-src/layouts/searchItem/Related.js +4 -0
- package/dist-src/utils/constants.js +1 -0
- package/dist-src/utils/formats.js +3 -1
- package/dist-types/@types/filter.d.ts +1 -1
- package/dist-types/@types/search.d.ts +1 -0
- package/dist-types/components/ProductCard/index.d.ts +2 -1
- package/dist-types/utils/constants.d.ts +1 -0
- package/dist-web/index.js +21 -6
- package/dist-web/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -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`,
|
|
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, "
|
|
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;
|
|
@@ -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, "
|
|
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`,
|
|
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
|
};
|