@wayke-se/components-react 3.0.0-beta.9 → 3.0.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/dist-node/index.js +3204 -1021
- package/dist-node/index.js.map +1 -1
- package/dist-src/State/CentralStorage/useCentralStorage.js +7 -8
- package/dist-src/State/Path/PathProvider.js +1 -1
- package/dist-src/State/RelatedSearch/RelatedSearchProvider.js +1 -1
- package/dist-src/State/Search/SearchProvider.js +7 -10
- package/dist-src/components/ActionList/index.js +2 -3
- package/dist-src/components/Checklist/index.js +1 -1
- package/dist-src/components/ExtendContent/index.js +1 -1
- package/dist-src/components/Filter/index.js +10 -7
- package/dist-src/components/FilterPanel/checkListFacet.js +1 -1
- package/dist-src/components/FilterPanel/colorFacet.js +1 -1
- package/dist-src/components/FilterPanel/index.js +1 -1
- package/dist-src/components/FilterPanel/rangeFacet.js +14 -16
- package/dist-src/components/FinancialOptions/LoanModal.js +27 -29
- package/dist-src/components/FinancialOptions/leasing.js +6 -6
- package/dist-src/components/FinancialOptions/loan.js +5 -6
- package/dist-src/components/Gallery/index.js +11 -16
- package/dist-src/components/Grid/index.js +2 -3
- package/dist-src/components/InputSelect/index.js +1 -1
- package/dist-src/components/InsuranceOptions/InsuranceFree.js +1 -2
- package/dist-src/components/InsuranceOptions/InsuranceFreeModal.js +4 -5
- package/dist-src/components/InsuranceOptions/InsuranceModal.js +3 -3
- package/dist-src/components/Lightbox/index.js +1 -1
- package/dist-src/components/OpeningHours/index.js +9 -9
- package/dist-src/components/RangeSlider/SliderWithLabel.js +1 -1
- package/dist-src/components/Result/index.js +7 -6
- package/dist-src/components/Video/EmbededVideo.js +1 -1
- package/dist-src/components/Video/QuickNavEmbeded.js +2 -2
- package/dist-src/components/Video/useThumbnail.js +1 -1
- package/dist-src/components/Video/utils.js +2 -2
- package/dist-src/hooks/useFetch.js +1 -1
- package/dist-src/hooks/useVimeoThumbnail.js +1 -1
- package/dist-src/layouts/searchItem/Branch.js +9 -10
- package/dist-src/layouts/searchItem/BranchModal.js +1 -1
- package/dist-src/layouts/searchItem/CheckList.js +16 -16
- package/dist-src/layouts/searchItem/ManufacturerPackagesOption.js +1 -2
- package/dist-src/layouts/searchItem/PackageOptionModal.js +7 -10
- package/dist-src/layouts/searchItem/PackageOptions.js +11 -14
- package/dist-src/layouts/searchItem/Property.js +4 -6
- package/dist-src/layouts/searchItem/Related.js +3 -4
- package/dist-src/layouts/searchItem/index.js +15 -17
- package/dist-src/utils/phonenumbers.js +1 -1
- package/dist-src/utils/specification.js +9 -13
- package/dist-src/utils/vehicle-properties/property-tree-creator.js +5 -5
- package/dist-types/components/InputSearch/index.d.ts +5 -3
- package/dist-types/components/RangeSlider/handle.d.ts +2 -2
- package/dist-types/components/RangeSlider/track.d.ts +2 -2
- package/dist-web/index.js +206 -233
- package/dist-web/index.js.map +1 -1
- package/package.json +18 -24
|
@@ -2,20 +2,19 @@ import { useContext, useEffect } from 'react';
|
|
|
2
2
|
import { CentralStorageContext } from './CentralStorageContext';
|
|
3
3
|
import useSearchItemBranch from '../../hooks/useSearchItemBranch';
|
|
4
4
|
const useCentralStorage = (vehicle) => {
|
|
5
|
-
var _a, _b;
|
|
6
5
|
const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
|
|
7
|
-
const connections =
|
|
6
|
+
const connections = vehicle?.branch?.connections;
|
|
8
7
|
const branchId = centralStorageId
|
|
9
|
-
?
|
|
8
|
+
? connections?.find((x) => x.id === centralStorageId)?.id
|
|
10
9
|
: undefined;
|
|
11
|
-
const { data, loading } = useSearchItemBranch(vehicle
|
|
10
|
+
const { data, loading } = useSearchItemBranch(vehicle?.id, branchId);
|
|
12
11
|
useEffect(() => {
|
|
13
|
-
if ((
|
|
12
|
+
if ((connections?.length || 0) > 0) {
|
|
14
13
|
const match = centralStorageId
|
|
15
|
-
? connections
|
|
14
|
+
? connections?.find((x) => x.id === centralStorageId)
|
|
16
15
|
: undefined;
|
|
17
16
|
if (!match) {
|
|
18
|
-
const first = connections
|
|
17
|
+
const first = connections?.[0];
|
|
19
18
|
if (first) {
|
|
20
19
|
setCentralStorageId(first.id);
|
|
21
20
|
}
|
|
@@ -23,7 +22,7 @@ const useCentralStorage = (vehicle) => {
|
|
|
23
22
|
}
|
|
24
23
|
}, [connections]);
|
|
25
24
|
return {
|
|
26
|
-
vehicle: (
|
|
25
|
+
vehicle: (connections?.length || 0) > 0 ? data?.vehicle : vehicle,
|
|
27
26
|
loading,
|
|
28
27
|
};
|
|
29
28
|
};
|
|
@@ -34,7 +34,7 @@ const PathProvider = ({ children }) => {
|
|
|
34
34
|
}
|
|
35
35
|
dispatch({ type: SET_PATH, path });
|
|
36
36
|
}, []);
|
|
37
|
-
const id = useMemo(() =>
|
|
37
|
+
const id = useMemo(() => state.path.match(regexGuidAnyWhere)?.pop(), [state.path]);
|
|
38
38
|
const value = useMemo(() => ({
|
|
39
39
|
...state,
|
|
40
40
|
previousPath,
|
|
@@ -3,7 +3,7 @@ import useFetch from '../../hooks/useFetch';
|
|
|
3
3
|
import { RelatedSearchContext } from './RelatedSearchContext';
|
|
4
4
|
const RelatedSearchProvider = ({ url, urlMlt, apiKey, children }) => {
|
|
5
5
|
const [queryFilter, setQueryFilter] = useState();
|
|
6
|
-
const query = queryFilter
|
|
6
|
+
const query = queryFilter?.searchParams.toString();
|
|
7
7
|
const { loading, data: response, error, } = useFetch(`${urlMlt || url}${query ? `?${query}` : ''}`, {
|
|
8
8
|
headers: apiKey
|
|
9
9
|
? {
|
|
@@ -29,7 +29,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
29
29
|
'x-api-key': apiKey,
|
|
30
30
|
}
|
|
31
31
|
: {},
|
|
32
|
-
}, !initialize || !!
|
|
32
|
+
}, !initialize || !!queryFilter?.block);
|
|
33
33
|
const popStateEvent = (event) => {
|
|
34
34
|
const { currentTarget } = event;
|
|
35
35
|
if (currentTarget) {
|
|
@@ -72,7 +72,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
72
72
|
const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
|
|
73
73
|
if (initialize) {
|
|
74
74
|
if (window.location.search.localeCompare(nextSearch) !== 0) {
|
|
75
|
-
const _path = pathRoute
|
|
75
|
+
const _path = pathRoute?.replace(/^\/|\/$/g, '');
|
|
76
76
|
const prefix = _path ? `/${_path}/` : '/';
|
|
77
77
|
const index = _path ? window.location.pathname.indexOf(prefix) : -1;
|
|
78
78
|
let pathname = window.location.pathname;
|
|
@@ -85,12 +85,11 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
85
85
|
}
|
|
86
86
|
}, [queryFilter, initialize, useQueryParamsFromUrl]);
|
|
87
87
|
useEffect(() => {
|
|
88
|
-
var _a;
|
|
89
88
|
if (response) {
|
|
90
89
|
if (!initialFacets && !useQueryParamsFromUrl) {
|
|
91
90
|
setInitialFacets(response.facets);
|
|
92
91
|
}
|
|
93
|
-
if (useQueryParamsFromUrl &&
|
|
92
|
+
if (useQueryParamsFromUrl && response.query?.parameters) {
|
|
94
93
|
const nextSearchParams = new URLSearchParams(response.query.parameters);
|
|
95
94
|
nextSearchParams.delete('hits');
|
|
96
95
|
nextSearchParams.delete('offset');
|
|
@@ -103,7 +102,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
103
102
|
});
|
|
104
103
|
}
|
|
105
104
|
}
|
|
106
|
-
if (queryFilter
|
|
105
|
+
if (queryFilter?.concatResult) {
|
|
107
106
|
setDocuments([...(documents || []), ...(response.documentList.documents || [])]);
|
|
108
107
|
}
|
|
109
108
|
else {
|
|
@@ -122,10 +121,9 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
122
121
|
}
|
|
123
122
|
}, [initialize]);
|
|
124
123
|
const onLoadMore = useCallback(() => {
|
|
125
|
-
var _a;
|
|
126
124
|
if (response) {
|
|
127
125
|
setQueryFilter({
|
|
128
|
-
searchParams: new URLSearchParams(
|
|
126
|
+
searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.query),
|
|
129
127
|
concatResult: true,
|
|
130
128
|
});
|
|
131
129
|
}
|
|
@@ -138,9 +136,8 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
|
|
|
138
136
|
: _initialQueryParams;
|
|
139
137
|
if (useQueryParamsFromUrl && _initialQueryParams) {
|
|
140
138
|
_initialQueryParams.forEach((value, key) => {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.append(key, value);
|
|
139
|
+
if (!initialQueryParams?.getAll(key)?.some((v) => v === value)) {
|
|
140
|
+
initialQueryParams?.append(key, value);
|
|
144
141
|
}
|
|
145
142
|
});
|
|
146
143
|
}
|
|
@@ -3,9 +3,8 @@ import ToggleItem from './toggle-item';
|
|
|
3
3
|
import { formatPhonenumber } from '../../utils/phonenumbers';
|
|
4
4
|
import PubSub from '../../utils/pubsub/pubsub';
|
|
5
5
|
const ActionList = ({ contact, branch }) => {
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const phonenumber = (contact === null || contact === void 0 ? void 0 : contact.phonenumber) || ((_b = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _b === void 0 ? void 0 : _b.phonenumber);
|
|
6
|
+
const email = contact?.email || branch?.contact?.email;
|
|
7
|
+
const phonenumber = contact?.phonenumber || branch?.contact?.phonenumber;
|
|
9
8
|
const onClickMailVisible = useCallback(() => PubSub.publish('MailVisible'), []);
|
|
10
9
|
const onClickPhoneVisible = useCallback(() => PubSub.publish('PhonenumberVisible'), []);
|
|
11
10
|
const onClickPhoneValue = useCallback(() => PubSub.publish('PhonenumberCall'), []);
|
|
@@ -6,7 +6,7 @@ const ChecklistItem = ({ label, onClick, active, radio }) => (React.createElemen
|
|
|
6
6
|
active && React.createElement(ActionIcon, null, radio ? React.createElement(IconRadio, { block: true }) : React.createElement(IconCheck, { block: true })),
|
|
7
7
|
React.createElement(ActionLabel, { className: active ? 'wayke__theme wayke__font--bold wayke__color--primary-text' : '' }, label))));
|
|
8
8
|
const Checklist = ({ items, radio }) => {
|
|
9
|
-
if (!
|
|
9
|
+
if (!items?.length) {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
12
|
return (React.createElement(List, null, items.map((item) => (React.createElement(ChecklistItem, { key: item.label, label: item.label, onClick: item.onClick, active: item.active, radio: radio })))));
|
|
@@ -10,7 +10,7 @@ const ExtendContent = ({ children, actionTitle, onClick }) => {
|
|
|
10
10
|
}
|
|
11
11
|
}, []);
|
|
12
12
|
const onRef = (ref) => {
|
|
13
|
-
const refHeight =
|
|
13
|
+
const refHeight = ref?.clientHeight || 0;
|
|
14
14
|
if (refHeight < 207) {
|
|
15
15
|
setExtend(true);
|
|
16
16
|
}
|
|
@@ -15,9 +15,8 @@ const isSelected = (f, searchParams) => {
|
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
const Filter = ({ filterList }) => {
|
|
18
|
-
var _a;
|
|
19
18
|
const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
|
|
20
|
-
const facets = response
|
|
19
|
+
const facets = response?.facets;
|
|
21
20
|
const [facet, setFacet] = useState();
|
|
22
21
|
const onSelectFacet = useCallback((nextFacet) => setFacet(nextFacet), []);
|
|
23
22
|
const onClose = useCallback(() => setFacet(undefined), []);
|
|
@@ -25,12 +24,16 @@ const Filter = ({ filterList }) => {
|
|
|
25
24
|
return null;
|
|
26
25
|
}
|
|
27
26
|
const filterNames = filterList ? filterList.map((x) => x.filterName) : undefined;
|
|
28
|
-
const filteredFacets =
|
|
27
|
+
const filteredFacets = facets
|
|
28
|
+
?.filter((x) => x.id !== 'segment')
|
|
29
|
+
?.filter((f) => (filterNames ? filterNames.includes(f.id) : true))
|
|
30
|
+
.sort((a, b) => filterNames
|
|
29
31
|
? filterNames.indexOf(a.id) -
|
|
30
32
|
filterNames.indexOf(b.id)
|
|
31
|
-
: 0)
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
: 0)
|
|
34
|
+
.map((x) => {
|
|
35
|
+
const match = filterList?.find((y) => y.filterName === x.id);
|
|
36
|
+
if (match?.displayName) {
|
|
34
37
|
return {
|
|
35
38
|
...x,
|
|
36
39
|
displayName: match.displayName,
|
|
@@ -42,7 +45,7 @@ const Filter = ({ filterList }) => {
|
|
|
42
45
|
};
|
|
43
46
|
});
|
|
44
47
|
return (React.createElement(React.Fragment, null,
|
|
45
|
-
initialFacets && facet && (React.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits:
|
|
48
|
+
initialFacets && facet && (React.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits: response?.documentList.numberOfHits || 0, onFilterUpdate: onFilterUpdate, onClose: onClose })),
|
|
46
49
|
React.createElement(List, null, filteredFacets
|
|
47
50
|
.filter((x) => x.filters.length)
|
|
48
51
|
.map((f) => {
|
|
@@ -23,7 +23,7 @@ const ChecklistFacet = ({ facet }) => {
|
|
|
23
23
|
.map((f) => ({
|
|
24
24
|
label: f.displayName,
|
|
25
25
|
onClick: () => onClick(f),
|
|
26
|
-
active:
|
|
26
|
+
active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
|
|
27
27
|
})) })));
|
|
28
28
|
};
|
|
29
29
|
export default ChecklistFacet;
|
|
@@ -22,7 +22,7 @@ const ColorSelectFacet = ({ facet }) => {
|
|
|
22
22
|
.map((f) => ({
|
|
23
23
|
label: f.displayName,
|
|
24
24
|
onClick: () => onClick(f),
|
|
25
|
-
active:
|
|
25
|
+
active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
|
|
26
26
|
hex: [getHexColorFromDisplayName(f.displayName)],
|
|
27
27
|
})) }));
|
|
28
28
|
};
|
|
@@ -17,7 +17,7 @@ const FilterPanel = ({ facet, filteredFacets, numberOfHits, loading, onFilterUpd
|
|
|
17
17
|
React.createElement(ButtonContent, null, `Visa ${numberOfHits} ${numberOfHits === 1 ? 'bil' : 'bilar'}`))))) },
|
|
18
18
|
React.createElement(Accordion, null, filteredFacets
|
|
19
19
|
.filter((x) => x.filters.length)
|
|
20
|
-
.map((f) => (React.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id ===
|
|
20
|
+
.map((f) => (React.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id === facet?.id },
|
|
21
21
|
React.createElement(Repeat, null,
|
|
22
22
|
React.createElement(FacetSelector, { facet: f }))))))));
|
|
23
23
|
};
|
|
@@ -3,9 +3,9 @@ import RangeSlider from '../RangeSlider/index';
|
|
|
3
3
|
import useSearch from '../../State/Search/useSearch';
|
|
4
4
|
const getInitialValues = (domain, facet, searchParams) => {
|
|
5
5
|
const facetMin = domain[0]; //parseInt(facet.filters[0].displayName, 10);
|
|
6
|
-
const _queryMin =
|
|
6
|
+
const _queryMin = searchParams?.get(`${facet.id}.min`) || null;
|
|
7
7
|
const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
|
|
8
|
-
const _queryMax =
|
|
8
|
+
const _queryMax = searchParams?.get(`${facet.id}.max`) || null;
|
|
9
9
|
const queryMin = parseInt(_queryMin === null ? `${facetMin}` : _queryMin, 10);
|
|
10
10
|
const min = facetMin > queryMin ? facetMin : queryMin;
|
|
11
11
|
const queryMax = parseInt(_queryMax === null ? `${facetMax}` : _queryMax, 10);
|
|
@@ -27,41 +27,39 @@ const getSteps = (initialAllValues) => {
|
|
|
27
27
|
return initialAllValues;
|
|
28
28
|
};
|
|
29
29
|
const RangeFacet = ({ facet, unit, formatValues }) => {
|
|
30
|
-
var _a, _b, _c;
|
|
31
30
|
const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
|
|
32
|
-
const initialFacet = initialFacets
|
|
33
|
-
const maxPrefix =
|
|
31
|
+
const initialFacet = initialFacets?.find((x) => x.id === facet.id);
|
|
32
|
+
const maxPrefix = initialFacet?.filters[initialFacet?.filters.length - 1]?.displayName?.includes('+');
|
|
34
33
|
const [state, setValues] = useState(undefined);
|
|
35
34
|
useEffect(() => {
|
|
36
|
-
const _initialAllValues =
|
|
35
|
+
const _initialAllValues = initialFacet?.filters.map((f) => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10)) || [1, 2];
|
|
37
36
|
const _steps = getSteps(_initialAllValues);
|
|
38
37
|
const domain = [_steps[0], _steps[_steps.length - 1]];
|
|
39
38
|
setValues({
|
|
40
|
-
id: initialFacet
|
|
39
|
+
id: initialFacet?.id,
|
|
41
40
|
steps: _steps,
|
|
42
41
|
domain: [_steps[0], _steps[_steps.length - 1]],
|
|
43
|
-
values:
|
|
42
|
+
values: initialFacet?.filters.length
|
|
44
43
|
? getInitialValues(domain, initialFacet, queryFilter.searchParams)
|
|
45
44
|
: [0, 0],
|
|
46
45
|
});
|
|
47
|
-
}, [initialFacet
|
|
46
|
+
}, [initialFacet?.id]);
|
|
48
47
|
useEffect(() => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const init = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length)
|
|
48
|
+
if (state?.id) {
|
|
49
|
+
const init = initialFacet?.filters.length
|
|
52
50
|
? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
|
|
53
51
|
: [0, 0];
|
|
54
|
-
const minStr =
|
|
55
|
-
const maxStr =
|
|
52
|
+
const minStr = queryFilter.searchParams?.get(`${facet.id}.min`);
|
|
53
|
+
const maxStr = queryFilter.searchParams?.get(`${facet.id}.max`);
|
|
56
54
|
const min = minStr ? parseFloat(minStr) : init[0];
|
|
57
55
|
const max = maxStr ? parseFloat(maxStr) : init[1];
|
|
58
56
|
if (min !== state.values[0] || max !== state.values[1]) {
|
|
59
57
|
onChange([min, max]);
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
|
-
}, [
|
|
60
|
+
}, [queryFilter.searchParams?.toString()]);
|
|
63
61
|
const onChange = useCallback((nextValues) => {
|
|
64
|
-
if (state
|
|
62
|
+
if (state?.id) {
|
|
65
63
|
if (state.values[0] !== nextValues[0] || state.values[1] !== nextValues[1]) {
|
|
66
64
|
setValues({ ...state, values: nextValues.slice() });
|
|
67
65
|
const query = new URLSearchParams(queryFilter.searchParams);
|
|
@@ -22,7 +22,6 @@ const stepGenerator = (step, max, steps = [], current) => {
|
|
|
22
22
|
return stepGenerator(step, max, steps, nextCurrent);
|
|
23
23
|
};
|
|
24
24
|
const LoanModal = ({ id, financialOption, onClose }) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
26
25
|
const [tmp, setTmp] = useState();
|
|
27
26
|
const [extend, setExtend] = React.useState(false);
|
|
28
27
|
const onToggleExtend = React.useCallback(() => {
|
|
@@ -32,60 +31,59 @@ const LoanModal = ({ id, financialOption, onClose }) => {
|
|
|
32
31
|
setExtend(!extend);
|
|
33
32
|
}, [extend]);
|
|
34
33
|
const [variables, setVariables] = useState({
|
|
35
|
-
duration:
|
|
36
|
-
downPayment:
|
|
37
|
-
residual:
|
|
34
|
+
duration: financialOption.duration?.current,
|
|
35
|
+
downPayment: financialOption.downPayment?.current,
|
|
36
|
+
residual: financialOption.residual?.current,
|
|
38
37
|
});
|
|
39
38
|
const { duration, downPayment, residual } = variables;
|
|
40
39
|
const { loading, data } = useLoanCalculation(id, duration, downPayment, residual);
|
|
41
40
|
useEffect(() => {
|
|
42
|
-
var _a, _b, _c, _d, _e, _f;
|
|
43
41
|
if (data) {
|
|
44
42
|
setTmp(data);
|
|
45
43
|
setVariables({
|
|
46
|
-
duration:
|
|
47
|
-
downPayment:
|
|
48
|
-
residual:
|
|
44
|
+
duration: data?.loan?.duration?.current || 0,
|
|
45
|
+
downPayment: data?.loan?.downPayment?.current || 0,
|
|
46
|
+
residual: data?.loan?.residual?.current || 0,
|
|
49
47
|
});
|
|
50
48
|
}
|
|
51
49
|
}, [data]);
|
|
52
|
-
const loan =
|
|
53
|
-
const downPaymentCurrent =
|
|
54
|
-
const downPaymentMin =
|
|
55
|
-
const downPaymentMax =
|
|
56
|
-
const downPaymentStep =
|
|
50
|
+
const loan = data?.loan || tmp?.loan;
|
|
51
|
+
const downPaymentCurrent = loan?.downPayment?.current || 0;
|
|
52
|
+
const downPaymentMin = loan?.downPayment?.min || 0;
|
|
53
|
+
const downPaymentMax = loan?.downPayment?.max || 0;
|
|
54
|
+
const downPaymentStep = loan?.downPayment?.step || 0;
|
|
57
55
|
const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
|
|
58
56
|
const onDownPaymentChange = useCallback((values) => {
|
|
59
57
|
PubSub.publish('FinanceInterest');
|
|
60
58
|
setVariables({ ...variables, downPayment: values[0] });
|
|
61
59
|
}, [variables]);
|
|
62
|
-
const durationCurrent =
|
|
63
|
-
const durationMin =
|
|
64
|
-
const durationMax =
|
|
65
|
-
const durationStep =
|
|
60
|
+
const durationCurrent = loan?.duration?.current || 0;
|
|
61
|
+
const durationMin = loan?.duration?.min || 0;
|
|
62
|
+
const durationMax = loan?.duration?.max || 0;
|
|
63
|
+
const durationStep = loan?.duration?.step || 0;
|
|
66
64
|
const durationSteps = stepGenerator(durationStep, durationMax);
|
|
67
65
|
const onDurationChange = useCallback((values) => {
|
|
68
66
|
PubSub.publish('FinanceInterest');
|
|
69
67
|
setVariables({ ...variables, duration: values[0] });
|
|
70
68
|
}, [variables]);
|
|
71
|
-
const residualCurrent = (
|
|
72
|
-
const residualMin = (
|
|
73
|
-
const residualMax = (
|
|
74
|
-
const residualStep = (
|
|
69
|
+
const residualCurrent = (loan?.residual?.current || 0) * 100 || 0;
|
|
70
|
+
const residualMin = (loan?.residual?.min || 0) * 100 || 0;
|
|
71
|
+
const residualMax = (loan?.residual?.max || 0) * 100 || 0;
|
|
72
|
+
const residualStep = (loan?.residual?.step || 0) * 100 || 0;
|
|
75
73
|
const residualSteps = stepGenerator(residualStep, residualMax);
|
|
76
74
|
const onResidualChange = useCallback((values) => {
|
|
77
75
|
PubSub.publish('FinanceInterest');
|
|
78
76
|
setVariables({ ...variables, residual: values[0] / 100 });
|
|
79
77
|
}, [variables]);
|
|
80
|
-
const interestText = ((
|
|
81
|
-
const effectiveInterestText = ((
|
|
78
|
+
const interestText = ((loan?.interest || 0) * 100).toFixed(2);
|
|
79
|
+
const effectiveInterestText = ((loan?.effectiveInterest || 0) * 100).toFixed(2);
|
|
82
80
|
return (React.createElement(Modal, { title: "L\u00E5nealternativ", onClose: onClose },
|
|
83
81
|
React.createElement(Repeat, null,
|
|
84
82
|
React.createElement(ContentLogo, null,
|
|
85
|
-
|
|
83
|
+
financialOption?.description && (React.createElement(ContentLogoText, null,
|
|
86
84
|
React.createElement(Content, null,
|
|
87
85
|
React.createElement("p", null, financialOption.description)))),
|
|
88
|
-
|
|
86
|
+
financialOption?.image && (React.createElement(ContentLogoMedia, null,
|
|
89
87
|
React.createElement(LogoBox, { logo: financialOption.image, alt: financialOption.name || 'Logotyp', wide: true }))))),
|
|
90
88
|
React.createElement(Repeat, null,
|
|
91
89
|
React.createElement(RepeatSmall, null,
|
|
@@ -97,7 +95,7 @@ const LoanModal = ({ id, financialOption, onClose }) => {
|
|
|
97
95
|
React.createElement(RepeatSmall, null,
|
|
98
96
|
React.createElement(RepeatTiny, null,
|
|
99
97
|
React.createElement(Content, { small: true },
|
|
100
|
-
React.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${
|
|
98
|
+
React.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${loan?.mileage !== null ? `och en årlig körsträcka om ${loan?.mileage} mil.` : ''}`)))),
|
|
101
99
|
React.createElement(RepeatSmall, null,
|
|
102
100
|
React.createElement(ButtonClear, { onClick: onToggleExtend, title: extend ? 'Visa mindre information' : 'Visa mer information' },
|
|
103
101
|
React.createElement(ButtonContent, null, extend ? 'Mindre information' : 'Mer information'))),
|
|
@@ -114,15 +112,15 @@ const LoanModal = ({ id, financialOption, onClose }) => {
|
|
|
114
112
|
},
|
|
115
113
|
{
|
|
116
114
|
label: 'Uppläggningskostnad',
|
|
117
|
-
value: `${numberSeparator(
|
|
115
|
+
value: `${numberSeparator(financialOption?.setupFee || 0)} kr`,
|
|
118
116
|
},
|
|
119
117
|
{
|
|
120
118
|
label: 'Administrativa avgifter',
|
|
121
|
-
value: `${numberSeparator(
|
|
119
|
+
value: `${numberSeparator(financialOption?.administrationFee || 0)} kr/mån`,
|
|
122
120
|
},
|
|
123
121
|
{
|
|
124
122
|
label: 'Total kreditkostnad',
|
|
125
|
-
value: `${numberSeparator(
|
|
123
|
+
value: `${numberSeparator(loan?.totalCreditCost || 0)} kr`,
|
|
126
124
|
},
|
|
127
125
|
] }))))))));
|
|
128
126
|
};
|
|
@@ -25,11 +25,11 @@ const Leasing = ({ financialOption }) => {
|
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
label: 'Bindningstid',
|
|
28
|
-
value: `${duration
|
|
28
|
+
value: `${duration?.current} månader`,
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
label: 'Årlig körsträcka',
|
|
32
|
-
value: `${numberSeparator(
|
|
32
|
+
value: `${numberSeparator(mileage?.current || 0)} mil/år`,
|
|
33
33
|
},
|
|
34
34
|
] }))))),
|
|
35
35
|
React.createElement(OptionBox, null,
|
|
@@ -38,14 +38,14 @@ const Leasing = ({ financialOption }) => {
|
|
|
38
38
|
React.createElement("p", null,
|
|
39
39
|
"Privatleasing",
|
|
40
40
|
' ',
|
|
41
|
-
|
|
41
|
+
mileage?.current && duration?.current && (React.createElement(React.Fragment, null,
|
|
42
42
|
React.createElement(UtilityTextPrimary, null,
|
|
43
|
-
numberSeparator(mileage
|
|
43
|
+
numberSeparator(mileage?.current),
|
|
44
44
|
" mil/\u00E5r"),
|
|
45
45
|
' ',
|
|
46
46
|
"i ",
|
|
47
|
-
React.createElement(UtilityTextPrimary, null,
|
|
48
|
-
duration
|
|
47
|
+
React.createElement(UtilityTextPrimary, null,
|
|
48
|
+
duration?.current,
|
|
49
49
|
" m\u00E5n"),
|
|
50
50
|
".",
|
|
51
51
|
' '))),
|
|
@@ -7,14 +7,13 @@ import { numberSeparator } from '../../utils/formats';
|
|
|
7
7
|
import useLoanCalculation from '../../hooks/useLoan';
|
|
8
8
|
import LoanModal from './LoanModal';
|
|
9
9
|
const Loan = ({ id, financialOption }) => {
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
11
10
|
const [modal, setModal] = useState(false);
|
|
12
11
|
const toggleModal = useCallback(() => setModal(!modal), [modal]);
|
|
13
|
-
const { data } = useLoanCalculation(id,
|
|
14
|
-
const interest =
|
|
15
|
-
const duration =
|
|
16
|
-
const monthlyCost =
|
|
17
|
-
const logo =
|
|
12
|
+
const { data } = useLoanCalculation(id, financialOption.duration?.current, financialOption.downPayment?.current, financialOption.residual?.current);
|
|
13
|
+
const interest = data?.loan?.interest;
|
|
14
|
+
const duration = data?.loan?.duration?.current;
|
|
15
|
+
const monthlyCost = data?.loan?.monthlyCost;
|
|
16
|
+
const logo = financialOption?.logotype || 'https://placehold.it/67x10';
|
|
18
17
|
// Skeleton?
|
|
19
18
|
if (financialOption.loanAmount === undefined ||
|
|
20
19
|
financialOption.loanAmount === null ||
|
|
@@ -28,8 +28,7 @@ const Gallery = ({ media, placeholderImage }) => {
|
|
|
28
28
|
const [lightbox, setLightbox] = useState(false);
|
|
29
29
|
const [navigationDisabled, setNavigationDisabled] = useState(false);
|
|
30
30
|
const beforeChange = useCallback((_, newIndex) => {
|
|
31
|
-
|
|
32
|
-
const element = (_b = (_a = quickNavRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) === null || _b === void 0 ? void 0 : _b[newIndex];
|
|
31
|
+
const element = quickNavRef.current?.querySelectorAll('li')?.[newIndex];
|
|
33
32
|
if (element) {
|
|
34
33
|
scrollIntoView(element, { scrollMode: 'if-needed', block: 'nearest', inline: 'nearest' });
|
|
35
34
|
}
|
|
@@ -47,7 +46,7 @@ const Gallery = ({ media, placeholderImage }) => {
|
|
|
47
46
|
}, []);
|
|
48
47
|
const onClick = useCallback(() => {
|
|
49
48
|
PubSub.publish('ImagesClick');
|
|
50
|
-
if (!isDragging.current && !lightbox && !!
|
|
49
|
+
if (!isDragging.current && !lightbox && !!media?.length) {
|
|
51
50
|
setLightbox(true);
|
|
52
51
|
}
|
|
53
52
|
}, [lightbox, media]);
|
|
@@ -82,20 +81,17 @@ const Gallery = ({ media, placeholderImage }) => {
|
|
|
82
81
|
setNavigationDisabled(false);
|
|
83
82
|
};
|
|
84
83
|
const onToggleLightbox = useCallback(() => setLightbox(!lightbox), [lightbox]);
|
|
85
|
-
const mediaLength =
|
|
84
|
+
const mediaLength = media?.length || 0;
|
|
86
85
|
const placeholder = useMemo(() => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE, [placeholderImage]);
|
|
87
86
|
return (React.createElement(React.Fragment, null,
|
|
88
87
|
React.createElement(Wrapper, null,
|
|
89
88
|
React.createElement(Main, null,
|
|
90
89
|
React.createElement(SliderWrapper, { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onClick: onClick },
|
|
91
|
-
React.createElement(Slider, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
m.type === 'embedded' && React.createElement(EmbededVideo, { src: m.files[0].url, index: i + 1 }),
|
|
97
|
-
m.type === 'sphere' && (React.createElement(Sphere, { visible: i === index, url: m.files[0].url, preview: m.files[0].url, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled }))));
|
|
98
|
-
})) : (React.createElement(Item, { key: placeholder },
|
|
90
|
+
React.createElement(Slider, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!media?.length ? (media.map((m, i) => (React.createElement(Item, { key: m.files[0].url || i },
|
|
91
|
+
m.type === 'image' && (React.createElement(Image, { src: m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.url, alt: `Bild ${i + 1}` })),
|
|
92
|
+
m.type === 'threesixty' && (React.createElement(ThreeSixty, { urls: m.files.map((x) => x.url), visible: i === index, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })),
|
|
93
|
+
m.type === 'embedded' && React.createElement(EmbededVideo, { src: m.files[0].url, index: i + 1 }),
|
|
94
|
+
m.type === 'sphere' && (React.createElement(Sphere, { visible: i === index, url: m.files[0].url, preview: m.files[0].url, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })))))) : (React.createElement(Item, { key: placeholder },
|
|
99
95
|
React.createElement(Image, { src: placeholder, alt: `Bild 1` })))),
|
|
100
96
|
navigationDisabled && mediaLength > 1 && (React.createElement(EnableNavigationButton, null,
|
|
101
97
|
React.createElement(ButtonSecondary, { onClick: onEnableNavigation, title: "St\u00E4ng" },
|
|
@@ -106,9 +102,8 @@ const Gallery = ({ media, placeholderImage }) => {
|
|
|
106
102
|
React.createElement(ArrowRight, { onClick: nextImage, title: "N\u00E4sta bild" },
|
|
107
103
|
React.createElement(IconChevronRight, { block: true }))))),
|
|
108
104
|
React.createElement(Alt, null,
|
|
109
|
-
React.createElement(QuickNav, { ref: quickNavRef }, !!
|
|
110
|
-
|
|
111
|
-
const src = ((_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')) === null || _a === void 0 ? void 0 : _a.url) ||
|
|
105
|
+
React.createElement(QuickNav, { ref: quickNavRef }, !!media?.length ? (media.map((m, i) => {
|
|
106
|
+
const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||
|
|
112
107
|
m.files[0].url;
|
|
113
108
|
return (React.createElement(QuickNavItem, { key: src || i, active: index === i },
|
|
114
109
|
React.createElement(QuickNavBtn, { onClick: () => goTo(i), title: `Gå till bild ${i + 1}` },
|
|
@@ -119,6 +114,6 @@ const Gallery = ({ media, placeholderImage }) => {
|
|
|
119
114
|
})) : (React.createElement(QuickNavItem, { key: placeholder, active: true },
|
|
120
115
|
React.createElement(QuickNavBtn, { onClick: () => goTo(0), title: `Gå till bild 0` },
|
|
121
116
|
React.createElement(QuickNavImg, { src: placeholder, alt: `Bild 1` }))))))),
|
|
122
|
-
lightbox && !!
|
|
117
|
+
lightbox && !!media?.length && (React.createElement(Lightbox, { media: media, index: index, onClose: onToggleLightbox }))));
|
|
123
118
|
};
|
|
124
119
|
export default Gallery;
|
|
@@ -3,8 +3,7 @@ import { Wrapper, List, Item } from './wrapper';
|
|
|
3
3
|
import ProductCard from '../ProductCard/index';
|
|
4
4
|
import { numberSeparator } from '../../utils/formats';
|
|
5
5
|
const resolveImage = (document) => {
|
|
6
|
-
|
|
7
|
-
const img = (_c = (_b = (_a = document.featuredImage) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url;
|
|
6
|
+
const img = document.featuredImage?.files?.[0]?.url;
|
|
8
7
|
if (img) {
|
|
9
8
|
return `${img}?w=567&q=72`;
|
|
10
9
|
}
|
|
@@ -16,7 +15,7 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
|
|
|
16
15
|
}
|
|
17
16
|
return (React.createElement(Wrapper, null,
|
|
18
17
|
React.createElement(List, null, documents.map((document) => {
|
|
19
|
-
const _path = pathRoute
|
|
18
|
+
const _path = pathRoute?.replace(/^\/|\/$/g, '');
|
|
20
19
|
const prefix = _path ? `/${_path}/` : '/';
|
|
21
20
|
const pathRouteUrl = window.location.pathname === '/'
|
|
22
21
|
? `${prefix}${document._id}`
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Wrapper, Select, Option, Icon } from './wrapper';
|
|
3
3
|
import { IconChevronDown } from '../Icon/index';
|
|
4
4
|
const InputSelect = ({ value, options, onChange, unit, title }) => (React.createElement(Wrapper, null,
|
|
5
|
-
React.createElement(Select, { value: value, onChange: onChange, title: title, "aria-label": title }, options
|
|
5
|
+
React.createElement(Select, { value: value, onChange: onChange, title: title, "aria-label": title }, options?.map((option) => (React.createElement(Option, { key: option.value, value: option.value },
|
|
6
6
|
option.displayName || option.value,
|
|
7
7
|
unit ? ` ${unit}` : '')))),
|
|
8
8
|
React.createElement(Icon, null,
|
|
@@ -8,7 +8,6 @@ import { marked } from 'marked';
|
|
|
8
8
|
import { ButtonInline } from '../Button/index';
|
|
9
9
|
import InsuranceFreeModal from './InsuranceFreeModal';
|
|
10
10
|
const Insurance = ({ insuranceOptions }) => {
|
|
11
|
-
var _a, _b;
|
|
12
11
|
const [modal, setModal] = useState(false);
|
|
13
12
|
const toggleModal = useCallback(() => setModal(!modal), [modal]);
|
|
14
13
|
if (!insuranceOptions.length) {
|
|
@@ -18,7 +17,7 @@ const Insurance = ({ insuranceOptions }) => {
|
|
|
18
17
|
modal && React.createElement(InsuranceFreeModal, { onClose: toggleModal, insuranceOptions: insuranceOptions[0] }),
|
|
19
18
|
React.createElement(Repeat, null,
|
|
20
19
|
React.createElement(RepeatTiny, null,
|
|
21
|
-
React.createElement(VisualHeading, null,
|
|
20
|
+
React.createElement(VisualHeading, null, insuranceOptions[0]?.insuranceHeader ?? 'Försäkring')),
|
|
22
21
|
React.createElement(RepeatTiny, null,
|
|
23
22
|
React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
|
|
24
23
|
insuranceOption.description && (React.createElement(Content, { dangerouslySetInnerHTML: {
|