@wayke-se/components-react 2.16.0 → 3.0.0-beta.10
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 +33 -2
- package/dist-node/index.js +3254 -1142
- 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 +42 -21
- package/dist-src/providers/WaykeItemProvidet.js +7 -11
- package/dist-src/providers/WaykeProvider.js +8 -12
- 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/State/CentralStorage/useCentralStorage.d.ts +1 -1
- package/dist-types/State/Settings/SettingsContext.d.ts +1 -0
- 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-types/components/Video/useThumbnail.d.ts +1 -1
- package/dist-types/components/Video/utils.d.ts +2 -2
- package/dist-types/hooks/useFetch.d.ts +1 -1
- package/dist-types/hooks/useInsurance.d.ts +1 -1
- package/dist-types/hooks/useLoan.d.ts +1 -1
- package/dist-types/hooks/useSearchItem.d.ts +1 -1
- package/dist-types/hooks/useSearchItemBranch.d.ts +1 -1
- package/dist-types/hooks/useVimeoThumbnail.d.ts +1 -1
- package/dist-types/utils/regex.d.ts +1 -1
- package/dist-types/utils/ssn.d.ts +1 -1
- package/dist-web/index.js +250 -323
- package/dist-web/index.js.map +1 -1
- package/package.json +18 -26
- package/dist-src/components/Ecom/index.js +0 -48
- package/dist-src/hooks/useEcom.js +0 -18
- package/dist-types/components/Ecom/index.d.ts +0 -10
- package/dist-types/hooks/useEcom.d.ts +0 -3
|
@@ -6,15 +6,14 @@ import { ButtonInline } from '../Button/index';
|
|
|
6
6
|
import LogoBox from '../LogoBox/index';
|
|
7
7
|
import { marked } from 'marked';
|
|
8
8
|
const InsuranceFreeModal = ({ onClose, insuranceOptions }) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
(insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.longDescription) && (React.createElement(Repeat, null,
|
|
9
|
+
return (React.createElement(Modal, { title: insuranceOptions?.insuranceHeader ?? 'Försäkring', onClose: onClose },
|
|
10
|
+
insuranceOptions?.longDescription && (React.createElement(Repeat, null,
|
|
12
11
|
React.createElement(Content, { dangerouslySetInnerHTML: {
|
|
13
12
|
__html: marked(insuranceOptions.longDescription),
|
|
14
13
|
} }))),
|
|
15
|
-
|
|
14
|
+
insuranceOptions?.url && (React.createElement(Repeat, null,
|
|
16
15
|
React.createElement(ButtonInline, { as: "a", href: insuranceOptions.url, target: "_blank", rel: "noopener noreferrer" }, "L\u00E4s mer om f\u00F6rs\u00E4kringen (\u00D6ppnas i ett nytt f\u00F6nster)"))),
|
|
17
|
-
|
|
16
|
+
insuranceOptions?.logotype && (React.createElement(Repeat, null,
|
|
18
17
|
React.createElement(LogoBox, { logo: insuranceOptions.logotype, alt: insuranceOptions.name || 'Logotyp', wide: true })))));
|
|
19
18
|
};
|
|
20
19
|
export default InsuranceFreeModal;
|
|
@@ -28,7 +28,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
|
|
|
28
28
|
drivingDistance: DrivingDistance.Between0And1000,
|
|
29
29
|
});
|
|
30
30
|
const [payload, setPayload] = useState();
|
|
31
|
-
const { loading, data, error } = useInsuranceCalculation(id,
|
|
31
|
+
const { loading, data, error } = useInsuranceCalculation(id, branch?.id ? branch?.id : undefined, ssnIsValid(payload?.ssn) ? payload?.ssn : undefined, payload?.drivingDistance);
|
|
32
32
|
const onChangeSsn = useCallback((e) => setForm({ ...form, ssn: e.currentTarget.value }), [form]);
|
|
33
33
|
const onChangeDrivingDistance = useCallback((e) => setForm({ ...form, drivingDistance: e.currentTarget.value }), [form]);
|
|
34
34
|
const onShowInsurances = useCallback(() => {
|
|
@@ -48,7 +48,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
|
|
|
48
48
|
{ value: DrivingDistance.Over2500, displayName: '2500+' },
|
|
49
49
|
];
|
|
50
50
|
return (React.createElement(Modal, { title: "F\u00F6rs\u00E4kring", onClose: onClose },
|
|
51
|
-
(
|
|
51
|
+
(insuranceOptions?.description || insuranceOptions?.logotype) && (React.createElement(Repeat, null,
|
|
52
52
|
React.createElement(ContentLogo, null,
|
|
53
53
|
insuranceOptions.description && (React.createElement(ContentLogoText, null,
|
|
54
54
|
React.createElement(Content, null,
|
|
@@ -77,7 +77,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
|
|
|
77
77
|
React.createElement(Loader, null))),
|
|
78
78
|
error && (React.createElement(Repeat, null,
|
|
79
79
|
React.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "Kunde inte h\u00E4mta f\u00F6rs\u00E4kringar. V\u00E4nligen f\u00F6rs\u00F6k igen."))),
|
|
80
|
-
React.createElement(React.Fragment, null,
|
|
80
|
+
React.createElement(React.Fragment, null, data?.insurances && (React.createElement(Repeat, null, data?.insurances.map((insurance) => (React.createElement(Repeat, { key: insurance.name },
|
|
81
81
|
React.createElement(DetailBox, { heading: `${numberSeparator(insurance.price)} ${insurance.unit}`, description: insurance.name },
|
|
82
82
|
React.createElement(Repeat, null,
|
|
83
83
|
React.createElement(React.Fragment, null, insurance.description && (React.createElement(RepeatTiny, null,
|
|
@@ -17,7 +17,7 @@ const Lightbox = ({ index, media, onClose }) => {
|
|
|
17
17
|
onClose();
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
return (React.createElement(Wrapper, { ref: (ref) => ref
|
|
20
|
+
return (React.createElement(Wrapper, { ref: (ref) => ref?.focus(), onKeyDown: onKeyDown, tabIndex: 0 },
|
|
21
21
|
React.createElement(UiBlock, { onClick: onClose, "aria-hidden": true }),
|
|
22
22
|
media.map((m, i) => (React.createElement(Item, { key: i, ref: index === i ? onRef : undefined },
|
|
23
23
|
m.type === 'image' && (React.createElement(Img, { id: `lightbox-image-${i}`, src: m.files[0].url, alt: `Bild ${i + 1}` })),
|
|
@@ -34,15 +34,15 @@ const arr = [];
|
|
|
34
34
|
const GetOpeningHours = (o) => KeyOrder.reduce((prev, current) => {
|
|
35
35
|
const title = TranslateWeekDays(current);
|
|
36
36
|
const item = o[current];
|
|
37
|
-
const previous = prev
|
|
38
|
-
if (previous && previous.from ==
|
|
37
|
+
const previous = prev?.[prev.length - 1];
|
|
38
|
+
if (previous && previous.from == item?.from && previous.until === item?.until) {
|
|
39
39
|
prev[prev.length - 1].titleTo = title;
|
|
40
40
|
}
|
|
41
41
|
else {
|
|
42
42
|
prev.push({
|
|
43
43
|
titleFrom: title,
|
|
44
|
-
from: item
|
|
45
|
-
until: item
|
|
44
|
+
from: item?.from,
|
|
45
|
+
until: item?.until,
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
return prev;
|
|
@@ -53,8 +53,8 @@ const GetOpeningHoursToday = (o) => {
|
|
|
53
53
|
const current = o[day];
|
|
54
54
|
return {
|
|
55
55
|
title: current ? 'Öppetider idag' : 'Stängt idag',
|
|
56
|
-
from: current
|
|
57
|
-
until: current
|
|
56
|
+
from: current?.from,
|
|
57
|
+
until: current?.until,
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
60
|
const valuOfDateString = (s) => {
|
|
@@ -65,7 +65,7 @@ const OpeningHours = ({ openingHours }) => {
|
|
|
65
65
|
const today = useMemo(() => (openingHours ? GetOpeningHoursToday(openingHours) : null), [openingHours]);
|
|
66
66
|
const currentlyOpen = useMemo(() => {
|
|
67
67
|
try {
|
|
68
|
-
if (
|
|
68
|
+
if (today?.from && today?.until) {
|
|
69
69
|
const currentDate = new Date().valueOf();
|
|
70
70
|
const from = valuOfDateString(today.from);
|
|
71
71
|
const until = valuOfDateString(today.until);
|
|
@@ -87,9 +87,9 @@ const OpeningHours = ({ openingHours }) => {
|
|
|
87
87
|
React.createElement(TableColumn, null,
|
|
88
88
|
React.createElement(TableColumnRow, null,
|
|
89
89
|
React.createElement(TableColumnCell, null,
|
|
90
|
-
React.createElement(UtilityTextBold, null, today
|
|
90
|
+
React.createElement(UtilityTextBold, null, today?.title)),
|
|
91
91
|
React.createElement(TableColumnCell, null,
|
|
92
|
-
React.createElement(UtilityTextBold, null,
|
|
92
|
+
React.createElement(UtilityTextBold, null, today?.from ? `${today.from}-${today.until}` : 'Stängt'))),
|
|
93
93
|
oh.map((o) => (React.createElement(TableColumnRow, { key: o.titleFrom },
|
|
94
94
|
React.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom),
|
|
95
95
|
React.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : 'Stängt'))))))));
|
|
@@ -14,7 +14,7 @@ const SliderWithLabel = ({ label, values, domain, steps, loading, unit, formatVa
|
|
|
14
14
|
}, [loading]);
|
|
15
15
|
return (React.createElement(React.Fragment, null,
|
|
16
16
|
React.createElement(RepeatTiny, null,
|
|
17
|
-
React.createElement(RangeSliderLabel, { label: label, value: `${numberSeparator(
|
|
17
|
+
React.createElement(RangeSliderLabel, { label: label, value: `${numberSeparator(local?.[0] || values[0])}${unit ? ` ${unit}` : ''}` })),
|
|
18
18
|
React.createElement(RepeatTiny, null,
|
|
19
19
|
React.createElement(RangeSliderSimple, { loading: loading, values: values, domain: domain, steps: steps, onChange: onChange, onUpdate: onUpdate, unit: unit, formatValues: formatValues }))));
|
|
20
20
|
};
|
|
@@ -8,14 +8,15 @@ import useSearch from '../../State/Search/useSearch';
|
|
|
8
8
|
import SortSelect from '../SortSelect/index';
|
|
9
9
|
import { getTranslatedSortOptionDisplayName } from '../../utils/sortOptions';
|
|
10
10
|
const Result = ({ children }) => {
|
|
11
|
-
var _a;
|
|
12
11
|
const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
|
|
13
12
|
const onSortOptionChange = useCallback((e) => onFilterUpdate(e.currentTarget.value), []);
|
|
14
|
-
const numberOfDocuments =
|
|
15
|
-
const numberOfHits =
|
|
16
|
-
const useSkeletons = !!
|
|
17
|
-
const selectedSortOption =
|
|
18
|
-
const sortOptions = response
|
|
13
|
+
const numberOfDocuments = documents?.length || 0;
|
|
14
|
+
const numberOfHits = response?.documentList.numberOfHits || 0;
|
|
15
|
+
const useSkeletons = !!queryFilter?.concatResult;
|
|
16
|
+
const selectedSortOption = response?.documentList.sortOptions.find((x) => x.selected)?.query;
|
|
17
|
+
const sortOptions = response?.documentList.sortOptions
|
|
18
|
+
.filter((x) => x.displayName !== 'relevance')
|
|
19
|
+
.map((so) => ({
|
|
19
20
|
value: so.query,
|
|
20
21
|
displayName: getTranslatedSortOptionDisplayName(so.displayName),
|
|
21
22
|
}));
|
|
@@ -20,7 +20,7 @@ const GalleryEmbed = ({ src, index }) => {
|
|
|
20
20
|
const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
|
|
21
21
|
const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
|
|
22
22
|
const customVideo = src.toLowerCase().endsWith('.mp4');
|
|
23
|
-
if (
|
|
23
|
+
if (thumbnail?.length && !customVideo) {
|
|
24
24
|
return (React.createElement(React.Fragment, null,
|
|
25
25
|
React.createElement(ImageFull, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }),
|
|
26
26
|
React.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
|
|
@@ -7,8 +7,8 @@ const QuickNavEmbeded = ({ src, index }) => {
|
|
|
7
7
|
const thumbnail = useThumbnail(src);
|
|
8
8
|
const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
|
|
9
9
|
const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
|
|
10
|
-
const customVideo = src
|
|
11
|
-
if (
|
|
10
|
+
const customVideo = src?.toLowerCase().endsWith('.mp4');
|
|
11
|
+
if (thumbnail?.length && !customVideo)
|
|
12
12
|
return (React.createElement(QuickNavImg, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }));
|
|
13
13
|
if (customVideo)
|
|
14
14
|
return React.createElement(CustomPlayer, { key: index, url: src, ratio: "66.66%" });
|
|
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
|
|
|
2
2
|
import { getVimeoId, getYoutubeThumbnail } from './utils';
|
|
3
3
|
import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
|
|
4
4
|
const useThumbnail = (url, small) => {
|
|
5
|
-
if (url
|
|
5
|
+
if (url?.toLowerCase().endsWith('.mp4'))
|
|
6
6
|
return;
|
|
7
7
|
const [thumbnail, setThumbnail] = useState();
|
|
8
8
|
const vimeoId = url ? getVimeoId(url) : undefined;
|
|
@@ -21,7 +21,7 @@ export const getYoutubeThumbnail = (url) => {
|
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
23
|
export const onImageLoad = (e, thumbnail) => {
|
|
24
|
-
if (
|
|
24
|
+
if (thumbnail?.length === 2 &&
|
|
25
25
|
e.currentTarget.src === thumbnail[0] &&
|
|
26
26
|
e.currentTarget.naturalWidth === 120 &&
|
|
27
27
|
e.currentTarget.naturalHeight === 90) {
|
|
@@ -29,7 +29,7 @@ export const onImageLoad = (e, thumbnail) => {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
export const onImageError = (e, thumbnail) => {
|
|
32
|
-
if (
|
|
32
|
+
if (thumbnail?.length === 2) {
|
|
33
33
|
e.currentTarget.src = thumbnail[1];
|
|
34
34
|
}
|
|
35
35
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useEffect, useState, useCallback } from 'react';
|
|
2
2
|
const cache = {};
|
|
3
|
-
const getCachedResult = (key) =>
|
|
3
|
+
const getCachedResult = (key) => cache?.[key] || undefined;
|
|
4
4
|
const setCachedResult = (key, value) => {
|
|
5
5
|
cache[key] = value;
|
|
6
6
|
};
|
|
@@ -4,7 +4,7 @@ const useVimeoThumbnail = (id, small) => {
|
|
|
4
4
|
const [thumbnail, setThumbnail] = useState();
|
|
5
5
|
const { data } = useFetch(`http://vimeo.com/api/v2/video/${id}.json`, {}, !id || !!thumbnail, true);
|
|
6
6
|
useEffect(() => {
|
|
7
|
-
if (data
|
|
7
|
+
if (data?.[0]) {
|
|
8
8
|
if (small && data[0].thumbnail_small) {
|
|
9
9
|
setThumbnail(data[0].thumbnail_small);
|
|
10
10
|
}
|
|
@@ -11,7 +11,6 @@ import Map from '../../components/Map/index';
|
|
|
11
11
|
import BranchModal from './BranchModal';
|
|
12
12
|
import { formatPhonenumber } from '../../utils/phonenumbers';
|
|
13
13
|
const Branch = ({ branch, loading }) => {
|
|
14
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15
14
|
const [modal, setModal] = useState(false);
|
|
16
15
|
const openModal = useCallback(() => setModal(true), []);
|
|
17
16
|
const closeModal = useCallback(() => setModal(false), []);
|
|
@@ -24,14 +23,14 @@ const Branch = ({ branch, loading }) => {
|
|
|
24
23
|
return null;
|
|
25
24
|
}
|
|
26
25
|
return (React.createElement(React.Fragment, null,
|
|
27
|
-
modal && (React.createElement(BranchModal, { loading: loading, connections: branch
|
|
26
|
+
modal && (React.createElement(BranchModal, { loading: loading, connections: branch?.connections, onClose: closeModal })),
|
|
28
27
|
React.createElement(Repeat, null,
|
|
29
|
-
React.createElement(H2, { noMargin: true },
|
|
30
|
-
? `Den här bilen finns på vår anläggning i ${
|
|
28
|
+
React.createElement(H2, { noMargin: true }, branch?.location?.city
|
|
29
|
+
? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
|
|
31
30
|
: 'Kontakt')),
|
|
32
31
|
React.createElement(Repeat, null,
|
|
33
|
-
React.createElement(Map, { position:
|
|
34
|
-
(
|
|
32
|
+
React.createElement(Map, { position: branch?.location?.position })),
|
|
33
|
+
(branch?.connections?.length || 0) > 1 && (React.createElement(Repeat, null,
|
|
35
34
|
React.createElement(Content, null,
|
|
36
35
|
React.createElement("p", null,
|
|
37
36
|
"Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.",
|
|
@@ -42,13 +41,13 @@ const Branch = ({ branch, loading }) => {
|
|
|
42
41
|
React.createElement(ProductPageContentLimit, null,
|
|
43
42
|
React.createElement(Repeat, null,
|
|
44
43
|
React.createElement(TableColumn, null,
|
|
45
|
-
|
|
44
|
+
branch?.location?.streetAddress && branch?.location?.city && (React.createElement(TableColumnRow, null,
|
|
46
45
|
React.createElement(TableColumnCell, null, "Adress"),
|
|
47
46
|
React.createElement(TableColumnCell, null,
|
|
48
47
|
React.createElement(ButtonInlineBold, null,
|
|
49
|
-
React.createElement(ButtonContent, null, `${
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
React.createElement(ButtonContent, null, `${branch?.location?.streetAddress}, ${branch?.location?.city}`))))),
|
|
49
|
+
branch?.contact?.phonenumber && (React.createElement(PhoneNumber, { phoneNumber: formatPhonenumber(branch.contact.phonenumber) })))),
|
|
50
|
+
branch?.openingHours && (React.createElement(Repeat, null,
|
|
52
51
|
React.createElement(OpeningHours, { openingHours: branch.openingHours })))))));
|
|
53
52
|
};
|
|
54
53
|
export default Branch;
|
|
@@ -25,7 +25,7 @@ const BranchModal = ({ loading, connections, onClose }) => {
|
|
|
25
25
|
React.createElement("p", null, "V\u00E4lj den anl\u00E4ggning du vill visa kontaktuppgifter f\u00F6r."))),
|
|
26
26
|
React.createElement(RepeatTiny, null,
|
|
27
27
|
React.createElement(InputLabel, null, "V\u00E4lj anl\u00E4ggning"),
|
|
28
|
-
React.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections
|
|
28
|
+
React.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections?.map((x) => ({
|
|
29
29
|
value: x.id,
|
|
30
30
|
displayName: x.name,
|
|
31
31
|
})), title: "V\u00E4lj anl\u00E4ggning" }))),
|
|
@@ -19,45 +19,45 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
|
|
|
19
19
|
setModalBranch(false);
|
|
20
20
|
}
|
|
21
21
|
}, [branch, contact]);
|
|
22
|
-
const packageOption = manufacturer
|
|
22
|
+
const packageOption = manufacturer?.packageOption;
|
|
23
23
|
return (React.createElement(React.Fragment, null,
|
|
24
|
-
modalBranch && (React.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch
|
|
24
|
+
modalBranch && (React.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch?.connections, onClose: closeModalBranch })),
|
|
25
25
|
modal && React.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
|
|
26
26
|
React.createElement(Repeat, null,
|
|
27
27
|
React.createElement(CheckMarkList, null,
|
|
28
|
-
|
|
28
|
+
packageOption?.title && (React.createElement(CheckMarkListItem, null,
|
|
29
29
|
React.createElement(React.Fragment, null,
|
|
30
30
|
"Inkl.",
|
|
31
31
|
' ',
|
|
32
32
|
React.createElement(ButtonInline, { onClick: () => onOpen({
|
|
33
|
-
title: packageOption
|
|
34
|
-
image: packageOption
|
|
35
|
-
description: packageOption
|
|
36
|
-
link: packageOption
|
|
33
|
+
title: packageOption?.title,
|
|
34
|
+
image: packageOption?.image,
|
|
35
|
+
description: packageOption?.description,
|
|
36
|
+
link: packageOption?.link,
|
|
37
37
|
}) }, packageOption.title),
|
|
38
38
|
' ',
|
|
39
|
-
"begagnatgaranti"))),
|
|
40
|
-
packageOptions
|
|
39
|
+
"begagnatgaranti"))),
|
|
40
|
+
packageOptions?.map((packageOption, index) => (React.createElement(CheckMarkListItem, { key: packageOption.title || index },
|
|
41
41
|
React.createElement(React.Fragment, null,
|
|
42
42
|
"Inkl.",
|
|
43
43
|
' ',
|
|
44
44
|
React.createElement(ButtonInline, { onClick: () => onOpen({
|
|
45
|
-
title: packageOption
|
|
46
|
-
image: packageOption
|
|
47
|
-
description: packageOption
|
|
48
|
-
link: packageOption
|
|
45
|
+
title: packageOption?.title,
|
|
46
|
+
image: packageOption?.image,
|
|
47
|
+
description: packageOption?.description,
|
|
48
|
+
link: packageOption?.link,
|
|
49
49
|
}) }, packageOption.title))))),
|
|
50
|
-
|
|
50
|
+
ecommerce?.withHomeDelivery && React.createElement(CheckMarkListItem, null, "Hemleverans"))),
|
|
51
51
|
React.createElement(Repeat, null,
|
|
52
52
|
ecommerce && ecommerce.enabled && (React.createElement(RepeatTiny, null,
|
|
53
53
|
React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, fullWidth: true, onClick: toggleEcomModal },
|
|
54
54
|
React.createElement(ButtonContent, null, "K\u00F6p bilen online")))),
|
|
55
|
-
|
|
55
|
+
ecommerce?.reserved && (React.createElement(RepeatTiny, null,
|
|
56
56
|
React.createElement(SwitchBar, { title: "Bilen \u00E4r reserverad", body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare." },
|
|
57
57
|
React.createElement(Content, null,
|
|
58
58
|
React.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare."))))),
|
|
59
59
|
React.createElement(ActionList, { branch: branch, contact: contact })),
|
|
60
|
-
(
|
|
60
|
+
(branch?.connections.length || 0) > 1 && (React.createElement(Repeat, null,
|
|
61
61
|
React.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
|
|
62
62
|
React.createElement(Content, null,
|
|
63
63
|
React.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar. Byt anl\u00E4ggning f\u00F6r att visa kontaktuppgifter till just den anl\u00E4ggningen.")))))));
|
|
@@ -7,7 +7,6 @@ import { H2 } from '../../components/Heading/index';
|
|
|
7
7
|
import { ButtonInline } from '../../components/Button/index';
|
|
8
8
|
import LogoBox from '../../components/LogoBox/index';
|
|
9
9
|
const ManufacturerPackageOption = ({ packageOption }) => {
|
|
10
|
-
var _a;
|
|
11
10
|
if (!packageOption) {
|
|
12
11
|
return null;
|
|
13
12
|
}
|
|
@@ -16,7 +15,7 @@ const ManufacturerPackageOption = ({ packageOption }) => {
|
|
|
16
15
|
React.createElement(H2, { noMargin: true }, packageOption.title)),
|
|
17
16
|
packageOption.description && (React.createElement(Repeat, null,
|
|
18
17
|
React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
|
|
19
|
-
|
|
18
|
+
packageOption.link?.url && (React.createElement(Repeat, null,
|
|
20
19
|
React.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
|
|
21
20
|
? packageOption.link.title
|
|
22
21
|
: 'Läs mer (Öppnas i ett nytt fönster)'))),
|
|
@@ -5,14 +5,11 @@ import { ButtonInline } from '../../components/Button/index';
|
|
|
5
5
|
import Modal from '../../components/Modal/index';
|
|
6
6
|
import Content from '../../components/Content/index';
|
|
7
7
|
import LogoBox from '../../components/LogoBox/index';
|
|
8
|
-
const PackageOptionModal = ({ packageOption, onClose }) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.href) && packageOption.link.title && (React.createElement(Repeat, null,
|
|
16
|
-
React.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
|
|
17
|
-
};
|
|
8
|
+
const PackageOptionModal = ({ packageOption, onClose }) => (React.createElement(Modal, { title: packageOption.title || '', onClose: onClose },
|
|
9
|
+
packageOption.image && (React.createElement(Repeat, null,
|
|
10
|
+
React.createElement(LogoBox, { logo: packageOption.image, alt: packageOption.title || undefined, wide: true }))),
|
|
11
|
+
packageOption.description && (React.createElement(Repeat, null,
|
|
12
|
+
React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
|
|
13
|
+
packageOption.link?.href && packageOption.link.title && (React.createElement(Repeat, null,
|
|
14
|
+
React.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
|
|
18
15
|
export default PackageOptionModal;
|
|
@@ -10,19 +10,16 @@ const PackageOptions = ({ packageOptions }) => {
|
|
|
10
10
|
if (!packageOptions) {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
|
-
return (React.createElement(React.Fragment, null, packageOptions.map((packageOption, index) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
packageOption.image && (React.createElement(Repeat, null,
|
|
25
|
-
React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
|
|
26
|
-
})));
|
|
13
|
+
return (React.createElement(React.Fragment, null, packageOptions.map((packageOption, index) => (React.createElement(ProductPageMainSection, { key: packageOption.title || index },
|
|
14
|
+
React.createElement(Repeat, null,
|
|
15
|
+
React.createElement(H2, { noMargin: true }, packageOption.title)),
|
|
16
|
+
packageOption.description && (React.createElement(Repeat, null,
|
|
17
|
+
React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
|
|
18
|
+
packageOption.link?.url && (React.createElement(Repeat, null,
|
|
19
|
+
React.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
|
|
20
|
+
? packageOption.link.title
|
|
21
|
+
: 'Läs mer (Öppnas i ett nytt fönster)'))),
|
|
22
|
+
packageOption.image && (React.createElement(Repeat, null,
|
|
23
|
+
React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true }))))))));
|
|
27
24
|
};
|
|
28
25
|
export default PackageOptions;
|
|
@@ -19,7 +19,6 @@ const MetadataCategory = ({ properties, subCategories }) => (React.createElement
|
|
|
19
19
|
!!subCategories.length &&
|
|
20
20
|
subCategories.map((subCategory, index) => (React.createElement(MetadataSubCategory, { name: subCategory.name, properties: subCategory.properties, key: `${subCategory.name}-${index}` })))));
|
|
21
21
|
const PropertySet = ({ propertySet, vehicleData }) => {
|
|
22
|
-
var _a, _b;
|
|
23
22
|
const [activeCategoryId, setActiveCategoryId] = useState(-1);
|
|
24
23
|
const mappedProperties = useMemo(() => {
|
|
25
24
|
if (!propertySet) {
|
|
@@ -33,20 +32,19 @@ const PropertySet = ({ propertySet, vehicleData }) => {
|
|
|
33
32
|
return tree;
|
|
34
33
|
}, [propertySet]);
|
|
35
34
|
useEffect(() => {
|
|
36
|
-
|
|
37
|
-
const categories = ((_a = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _a === void 0 ? void 0 : _a.length) !== undefined ? mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories : undefined;
|
|
35
|
+
const categories = mappedProperties?.categories?.length !== undefined ? mappedProperties?.categories : undefined;
|
|
38
36
|
if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
|
|
39
37
|
setActiveCategoryId(categories[0].id);
|
|
40
38
|
}
|
|
41
39
|
}, [mappedProperties]);
|
|
42
40
|
const onTab = useCallback((id) => setActiveCategoryId(parseInt(id, 10)), []);
|
|
43
|
-
const activeCategory =
|
|
41
|
+
const activeCategory = mappedProperties?.categories?.find((category) => category.id === activeCategoryId);
|
|
44
42
|
return (React.createElement(React.Fragment, null,
|
|
45
43
|
React.createElement(Repeat, null,
|
|
46
|
-
React.createElement(Tabs, { tabs:
|
|
44
|
+
React.createElement(Tabs, { tabs: mappedProperties?.categories?.map((category) => ({
|
|
47
45
|
name: `${category.id}`,
|
|
48
46
|
displayName: category.name,
|
|
49
|
-
}))
|
|
47
|
+
})) || [], active: `${activeCategoryId}`, onClick: onTab })),
|
|
50
48
|
activeCategory && (React.createElement(Repeat, null,
|
|
51
49
|
React.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
|
|
52
50
|
};
|
|
@@ -19,7 +19,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
|
|
|
19
19
|
onClickSearchItem(id);
|
|
20
20
|
}
|
|
21
21
|
}, []);
|
|
22
|
-
if (!
|
|
22
|
+
if (!response?.documentList.documents.length || response?.documentList.documents.length === 0) {
|
|
23
23
|
return null;
|
|
24
24
|
}
|
|
25
25
|
if (loading) {
|
|
@@ -34,8 +34,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
|
|
|
34
34
|
React.createElement(H2, { noMargin: true }, "Senast inkomna")))),
|
|
35
35
|
React.createElement(Repeat, null,
|
|
36
36
|
React.createElement(OverflowGrid, null,
|
|
37
|
-
React.createElement(OverflowGridList, null, response
|
|
38
|
-
var _a, _b, _c;
|
|
37
|
+
React.createElement(OverflowGridList, null, response?.documentList.documents.map((document) => {
|
|
39
38
|
const prefix = pathRoute ? `/${pathRoute}` : '/';
|
|
40
39
|
const r = regexPathGuid(pathRoute);
|
|
41
40
|
const pathRouteUrl = window.location.pathname === '/'
|
|
@@ -44,7 +43,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
|
|
|
44
43
|
? window.location.pathname.replace(r, `${pathRoute}${document._id}`)
|
|
45
44
|
: `${window.location.pathname}${prefix}${document._id}`;
|
|
46
45
|
return (React.createElement(OverflowGridItem, { key: document._id },
|
|
47
|
-
React.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image:
|
|
46
|
+
React.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, uspList: [
|
|
48
47
|
{
|
|
49
48
|
title: document.modelYear,
|
|
50
49
|
},
|